HTML5のアウトラインを意識したマークアップ

HTML5には新しいタグがいくつか追加されています。それらの中には文書構造に意味を持つものもあり、今後のコーディングにおいては各々のタグの役割を理解することが重要になるかもしれません。
そこで、今回は、HTML5のアウトラインを意識して、このブログの文書構造を調整したいと思います。

HTML5アウトラインを可視化する

アウトラインを可視化するツールとしては、Google Chromeのプラグイン「HTML5 Outliner」があります。
HTML5 Outliner – chrome ウェブストア
その他には、Webツールもあります。
HTML 5 Outliner
2つで可視化した結果、構造に大きな差はありませんが、後者は画像のaltを見出しとして読み込んでくれる点など、若干の違いはあります。ただ、HTML5の定義が厳密でない現時点では、優劣をつけるのは難しいです。

以下は、このブログをHTML5 Outlinerで可視化した結果です。

どうやら、意味を持つ要素に対して見出しが設定されていない箇所が多いようです。

nav要素には見出しが必要？

例えば、グローバルナビにおいて「Untitled NAV」となっていて、見出しがないことを指摘しています。
ただ、調べてみたところ、nav要素やaside要素にはタイトルを必須としないので、こちらは見出しがないままで問題ないようです。どうしても気になるのであれば、nav要素やaside要素からdiv要素に置き換えるのも一つの方法でしょう。しかし、それではHTML5と特性を活かしていないともいえます。

article要素が全コンテンツを囲んでしまっている

article要素が全コンテンツ、つまり複数の記事概要であるsection要素を囲んでしまっています。articleはブログのentryに相当するので、記事毎にarticleで囲む必要があります。
複数のsection要素をarticle要素で囲う場合は、その全体で記事として成り立っていれば問題ありません。しかし、今回はそれぞれのsectionが記事として成り立っており、独立したページも持っているので、section要素をarticle要素に置き換える必要があります。

また、article要素は左カラムのレイアウトの構成としての役割を持っている場合、これも間違いです。articleやsectionなど文書構成に意味を持つ要素は、レイアウトのために用いられるのは好ましくないとされています。元々、全体を囲んでいたarticle要素はレイアウトのため構成あれていたので、ここではdiv要素に置き換えます。

以下は修正前の構造です。

<article>
	<section>
		<h1>タイトル</h1>
		<p>概要概要概要。。。</p>
	</section>
	<section>
		<h1>タイトル</h1>
		<p>概要概要概要。。。</p>
	</section>
	<section>
		<h1>タイトル</h1>
		<p>概要概要概要。。。</p>
	</section>
</article>

修正後の構造です。この場合、記事詳細ページではarticleブロックが1つになるわけです。

<div class="contents">
	<article>
		<h1>タイトル</h1>
		<p>概要概要概要。。。</p>
	</article>
	<article>
		<h1>タイトル</h1>
		<p>概要概要概要。。。</p>
	</article>
	<article>
		<h1>タイトル</h1>
		<p>概要概要概要。。。</p>
	</article>
</div>

nav要素を多用しないほうがよい？

明確に断言はできませんが、nav要素は多用しないほうがよいでしょう。
サイドメニューの「最新の記事」「アーカイブ」「タグクラウド」など、サイト内リンクについて全てにnav要素を利用していたため、アウトラインが冗長になってしまい文書構造が読み取りにくくなってしまいます。
サイト内のどの位置にこの記事があるのかを明確にする主なナビゲーションに限定してnav要素は使用し、一方で、アーカイブ的なページへのサイト内リンクは、nav要素は使用しない方が、アウトラインもすっきりしてよいでしょう。

以上、私がHTML5のアウトラインを意識するべく改善した点です。
HTML5自体、まだこれといった仕様が確定していないので、厳密にこうしなければいけないといった決まりはないと思います。
ただ、これまでのHTML4やXHTML1に比べて文書構造が意味を持つことは事実なので、今後はそれを意識したコーディングが必須になってくるでしょう。今後もHTML5のアウトラインの動向には注意したいと思います。