ブログに最適なHTML5のセマンティックな構造を考えてみた

HTML5では、セマンティックな文書構造を実現する構造化タグがいくつか用意されている。
(セマンティックウェブという言葉を初めて聞いたのはかれこれ十数年以上前じゃないかな。)

セマンティックウェブは、文書構造を、意味のあるタグなどでメタデータ化して、ゆるーいデータベースをインターネット上に構築しようというもの。たとえば、渋谷区で働いていて歯が急に痛くなって歯医者を探しているとき、 「渋谷の歯医者」でググると、「渋谷区」という場所にある歯医者が見つかるのか、「渋谷さん」という名前の歯医者なのかで検索性が変わってくる(もしかして場所が北海道ということも)。

ということで今回は、実用化はまだまだ先だとしても、文書の構造化に関しては期待を込めて今のうちから準備しておきたい。

HTML5の構造化タグ

とりあえず、自分なりの解釈をまとめる。HTML5ではいろんなタグが追加されたけど、今回は文書構造を示すタグに関してまとめておく。addressやfigureなどのメタ情報用のタグはまた今度ということで。

文書構造上で重要なHTML5タグ

article
それだけで完結する文書を規定。たとえば、ブログの記事、ニュースリリースなどは他文書とは独立して、それだけで意味が成り立つ。
header
基本的にはサイトのヘッダーとしての利用が一般的になるかもしれないが、記事(article)内で使用することも可能。
文書構造が入れ子になっていたとしても利用でき、完結する文章のヘッダー情報として利用できる。
文書の先頭なので、文書タイトルなどの情報が入る。
section
読んでそのままだけど文章の節や段落になる。
aside
これが個人的には一番わかりにくい。意味的には、その前後のコンテンツには関係しているけれども、やや本筋から逸れながらも軽く触れておきたいようなコンテンツから構成されるセクションらしい。構造上はsectionタグと同等だが、内容は補足や注釈なので重要度が落ちる。ということかと。
footer
文書の最後に、文書の作成者、関連文書の情報、作成日、更新日などのメタ情報をまとめる。また、footer要素がセクション全体を含むなら、付録や索引などの長い情報を入れる。

※articleとsectionの使い分けは悩みどころ

articleは独立して完結する文書。sectionは、その文書の中身を構成する段落(articleを用いないページの場合はページ全体が一文書にあたるのでその段落)。の違いがあると解釈できるようだ。

文書構造タグを図にしてみるとこうなった

結論としてはこんな感じかなと。

たぶん、基本的にはこの構造を連続させたり、入れ子にしたりしていけば良いんじゃないかと思う。
サイト全体でのheaderからfooterまで、細かい文書単位でのheaderからfooterまで。という感じで上記の構造が繰り返されていると、文書の重要度レベルが構造化されていくんじゃないかな。

W3Cさんにおねがい

文書内で利用できるタイトル用のタグがほしい

これまでのHTMLの考え方では、ひとつのページ(HTMLファイル)がひとつの文書。のような扱いだったのに、HTML5ではarticleタグを利用できるようになったので、ひとつのページの中に、複数の文書が存在する構造があり得る。
でも、タイトルを示すタグは、ページ(HTMLファイル)のheadタグ内に記載するtitleタグしか規定されていない。
articleタグの中でタイトルを明示するにはどうすればいいんだろうな??
HTML5でもまた見出しタグ(h)を使うのだろうか。見出しは見出しなので文書タイトルではないはず。なんだか気持ち悪い感じ。

sectionとpタグの使い分け方を教えてほしい

sectionタグの登場でpタグとの使い分け方が分からなくなった。どちらも章や段落を示すタグだったはず。何れはどちらかが非推奨になるのであろうか

ブログのHTML構造化

結果的に、だいたいこんな感じですかね。ツッコミどころはたくさんあると思いますが許してください。

<!DOCTYPE html>
<html lang="ja">
<head>
<title>タイトル</title>
<meta name="description" content="" />
</head>
<body>
<header>
<h1>ブログタイトル</h1>
<h2>概要</h2>
<nav>
<ul>
<li><a href="#">カテゴリーA</a></li>
<li><a href="#">カテゴリーB</a></li>
<li><a href="#">カテゴリーC</a></li>
</ul>
</nav>
<nav>パンくず</nav>
</header>
<article>
<header>
<h2><a href="#">ブログタイトル1</a></h2>
<time><a href="#">作成日</a></time>
</header>
<section> 本文 </section>
</article >
<aside>
<h4>コメント</h4>
<article>
<header>
<h4>コメントタイトル</h4>
</header>
<section> コメント本文 </section>
</article>
<article>
<header>
<h4>コメントタイトル</h4>
</header>
<section> コメント本文 </section>
</article>
<div> コメントフォーム </div>
</aside>
</div>
<aside>
<article>
<h4>プラグイン1</h4>
<section> 内容 </section>
</article>
<article>
<h4>プラグイン2</h4>
<section> 内容 </section>
</article>
</aside>
<footer>
<address>
コピーライト
</address>
</footer>
</body>
</html>

あとがき

ブログの記事もsectionで区切ったりと調整が必要かな。。めんどい。

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る