この記事は、スマートフォン時代のWebコーディングスクール のスライドの一部を再構成した記事です。
この記事ではHTML5以降の「セクショニング・コンテンツ」に絞って書いています。
HTML5以降で一般的なWebページをマークアップしようとした際、セクショニング・コンテンツへの理解は不可欠であると私は考えています。
セクショニング・コンテンツとは
まず「セクション」とは「区分、節、（会社などの）部門」のことを指します。
要するに「区切り」のことです。
セクショニング・コンテンツは「見出しやフッターの範囲を定義する コンテンツ」のことで、潜在的に見出しとアウトラインを持っています。
これまでのHTMLだと何が問題？
上の図はスライド資料のため、「記事小見出し」の下にあるはずの本文や、サイドバー内にある要素は省略しています。
例えばこのような場合だと、人間にはどこからどこまでが本文でどこがサイドバーでどこがフッターか分かりますが、検索エンジンなどの機械にはどこがどういう役割か分かりませんし、視覚障害者の方でヘッダーやナビゲーションをスキップして本文を読みたい方にも不便です。
この場合、フッターの Copyright のテキストが、本来無関係なサイドバーの内容であるように見えてしまいます。
HTML5にすると
この場合、記事本文の部分は article 要素で囲むことでどこからどこまでが記事本文であるか分かります。
article 要素は、セクショニング・コンテンツです。
本文との関連が薄い場所は aside タグで囲みます。
aside 要素はセクショニング・コンテンツです。
article、aside 要素はセクショニング・コンテンツなので見出しが必要ですが、footer 要素はセクショニング・コンテンツではない ため見出しはなくても構いません。
注意点
もし仮に、header 要素がセクショニング・コンテンツだったら？
header、footer 要素はセクショニング・
コンテンツではありません。
もし仮に、header、footer 要素がセクショニング・コンテンツだと
どんな問題があるか考えてみましょう。
もし仮に、header 要素がセクショニング・コンテンツだった場合を考えてみます。
header 要素の中にあるサイト名やロゴは header 要素の中でのみ有効ということになり、header 要素の外にあるものは全てサイト名やロゴとは無関係ということになってしまいます。
しかし実際には、header 要素はセクショニング・コンテンツではありません。
そのため、独立した区切りではないため、サイト名は「ページ全体に関係している」ということになります。
footer 要素も同様です。
セクショニング・コンテンツには見出しが必要
セクショニング・コンテンツには
見出しが必要です。
見出しは、h1〜h6 要素のいずれから始めても構いません。
例えば今までの (X)HTML の場合、サイト名は h1、記事見出しは h2 のようにすることが多いかと思いますが、それを維持して article 内の見出しは h2 からはじめても、h1 からはじめても構いません。
HTML5でサイトをリニューアルするした時の失敗例
(X)HTMLでこのようなページがあったとします。
これをHTML5に変更する場合を考えてみましょう。
header 要素はセクショニング・コンテンツではないので、セクショニング・コンテンツが必要だと考え、その内側に section 要素を入れて区切りを作ってみた場合、これは問題ありませんでしょうか？
実は、とあるテレビ局のWebサイトが HTML5 でリニューアルされた時にこのようになっていました。
前の図のようにマークアップすると、サイト名が header 要素の中の section 要素の中のみに有効ということになってしまい、それ以外の箇所はサイト名やロゴとは無関係ということになってしまいます。
というわけで、単純に header タグで囲み、section 要素などのセクショニング・コンテンツでは囲まない方が良いということになります。
※スマートフォン時代のWebコーディングスクールでは、この後 aside 要素や nav 要素などの解説、古いHTML で書かれたページを HTML5 で書き直す実習など行っていますが、この記事では省略させていただきます。
