吉本集の個人ブログ
Web制作の技術について書いています。たまに日記も書きます。

【HTML】section要素について

2014年10月14日 / category : その他-lab

立て続けにTypeScriptの記事ばかりだったので、たまにマークアップの記事を。
ず~っと気になっていたsection要素についてまとめてみたいと思います。
と言っても、すでに世の中はhtml5。
「sectionなんてもう当たり前に使っています」という感じでしょう。
しかし、html5でマークアップされている最近のwebサイトのソースを見ると、意外と「アレ?」と思うマークアップが多いです。
「アレ?sectionの使い方変わったのか?」と心配になるほどです。
section要素について上手にまとめている記事もたくさんあります。この記事を書く際も色々と参考にさせていただきましたし、どれも同じような解釈なので、少々僕なりに言葉を変えて記事をまとめると同時に、いま公開されているソースを例に挙げてみたいと思います。

section要素を語る前にまず、セクショニング・コンテンツと呼ばれるarticle要素, aside要素, nav要素, section要素の4要素について触れてみます。セクショニング・コンテンツとは、文章構造を明確にする範囲です。
header要素、footer要素もセクショニング・コンテンツじゃないのかな・・・と思いましたが、どうやら違うようです。

HTML
<header>ヘッダー領域</header>
<nav>ナビゲーション領域</nav>
<article>メインコンテンツ領域</article>
<aside>関連領域</aside>
<footer>フッター領域</footer>

だいたいのページ構造はこんな感じになるでしょう。
header要素、footer要素は、それぞれヘッダー領域、フッター領域として使用することに問題はないかと思います。
その他、ナビゲーション領域にはnav要素、メインコンテンツ領域にはarticle要素、関連領域にはaside要素。
これで文章構造が明確になりました。
この時点で使用されていないセクショニング・コンテンツの要素が、section要素です。
では、section要素をどのように使用するか・・・と、その前に、もう少しarticle要素について触れてみます。
あるサイトのソースコードを見ると、次のようなマークアップをしていました。

HTML
<div>
<article>コンテンツ</article>
<article>コンテンツ</article>
<article>コンテンツ</article>
<article>コンテンツ</article>
</div>

なるほど。article要素を複数使いますか。マークアップにはそれぞれの解釈があるところが面白いわけで。
確かに、article要素は同一ページに1つか使用してはいけない、というルールはないようです。
今回はarticle要素について深くは書きませんが、そのようなケースはあっても良いのかな・・・というのが現時点の僕の意見です。
例えば、そのページ内に独立したコンテンツ(メインコンテンツとは関連の無い)がある場合は、article要素を複数使用することになりそうです。(そのような文章構造になっているページはあるのか・・・。)

HTML
<article>メインコンテンツ</article>
<article>独立コンテンツ</article>

こんな感じですかね。

では、section要素についてです。
section要素について書かれている記事を色々と読みました。
「セクションは必ず章や節といった単位で使わなければいけません」
「セクションは意味や機能のひとまとまり」
「文章のアウトラインを明示するタグ」
などなど・・・。
これだけでもある程度わかっていただけそうです。
コンテンツの文章構造を見ると、

大見出し
説明内容(文章、図、リスト)
小見出し
説明内容(文章、図、リスト)

大見出し
説明内容(文章、図、リスト)
小見出し
説明内容(文章、図、リスト)

大見出し
説明内容(文章、図、リスト)
小見出し
説明内容(文章、図、リスト)

となっているはずです。(なっているべきです。)
この「見出し」+「説明文」の組み合わせをひとつのsection要素として考えるのが理想的なマークアップだと言えると思います。

HTML
<section>
<h1>大見出し</h1>
<p>説明文章</p>
	<section>
	<h2>小見出し</h2>
	<p>説明文章</p>
	</section>
</section>

<section>
<h1>大見出し</h1>
<p>説明文章</p>
	<section>
	<h2>小見出し</h2>
	<p>説明文章</p>
	</section>
</section>

こんな感じ。
ですので、section要素を考えると、次に見出し(h要素)が来ることになります。
これが理想的なsection要素の使い方です。
このsection要素の使い方が意外とできていないケースが多いみたいです。

では、いくつかサイトのソースを見てみます。

HTML
<section>
<div>
<ul>
<li></li>
</ul>
<h2><img></h2>
</div>
</section>

経験上、div要素が入ってしまうのは・・・仕方ないかも。。。
でも、ul要素とh2要素をなんとか・・・逆にしたい。。。

HTML
<section>
<article>
<h2></h2>
<p></p>
</article>
</section>

なるほど。article要素をsection要素で括るケースですか。
間違いではないかも。僕の解釈では恐らく使わないケースですが、解釈によっては間違いではない?かも。

HTML
<div>
<section><article><img></article></section>
<section><article><img></article></section>
<section><article><img></article></section>
<section><article><img></article></section>
<section><article><img></article></section>
</div>

1枚のサムネイル画像を、section+article+imgで組み合わせるマークアップ。
ん~、これは少々斬新かも。

と色々考えさせられるマークアップのケースがありましたが、
実務での経験上、デザイン段階で正しく設計されておらず、仕方なく理想と外れるマークアップになってしまう・・・というケースは多いです。