HTML5のセクショニング・コンテンツについて知っておくべきこと

この記事は、2016年5月14日に開催した HTML5再入門講座 という「HTML5を学び直す」ための無料講座のスライドの一部を再構成した記事です。

HTML5再入門講座ではセクショニング・コンテンツ以外の話や実習などもありましたが、この記事では「セクショニング・コンテンツ」に絞って書いています。

HTML5で一般的なWebページをマークアップしようとした際、セクショニング・コンテンツへの理解は不可欠であると私は考えています。

セクショニング・コンテンツとは

まず「セクション」とは「区分、節、(会社などの)部門」のことを指します。
要するに「区切り」のことです。

セクショニング・コンテンツとは

セクショニング・コンテンツは「見出しやフッターの範囲を定義する
コンテンツ」のことで、潜在的に見出しとアウトラインを持っています。

これまでのHTMLだと何が問題?

これまでのHTMLだと何が問題?

上の図はスライド資料のため、「記事小見出し」の下にあるはずの本文や、サイドバー内にある要素は省略しています。

例えばこのような場合だと、人間にはどこからどこまでが本文でどこがサイドバーでどこがフッターか分かりますが、検索エンジンなどの機械にはどこがどういう役割か分かりませんし、視覚障害者の方でヘッダーやナビゲーションをスキップして本文を読みたい方にも不便です。


この場合、フッターの Copyright のテキストが、本来無関係なサイドバーの内容であるように見えてしまいます。

HTML5にすると

HTML5にすると

この場合、記事本文の部分は article 要素で囲むことでどこからどこまでが記事本文であるか分かります。

article 要素は、セクショニング・コンテンツです。

HTML5にすると

本文との関連が薄い場所は aside タグで囲みます。

aside 要素はセクショニング・コンテンツです。

HTML5にすると

article、aside 要素はセクショニング・コンテンツなので見出しが必要ですが、footer 要素はセクショニング・コンテンツではない ため見出しはなくても構いません。

注意点

もし仮に、header 要素がセクショニング・コンテンツだったら?

header、footer 要素はセクショニング・
コンテンツではありません。
もし仮に、header、footer 要素がセクショニング・コンテンツだと
どんな問題があるか考えてみましょう。

もしheaderがセクショニングだと

もし仮に、header 要素がセクショニング・コンテンツだった場合を考えてみます。

header 要素の中にあるサイト名やロゴは header 要素の中でのみ有効ということになり、header 要素の外にあるものは全てサイト名やロゴとは無関係ということになってしまいます。

headerはセクショニングではないため

しかし実際には、header 要素はセクショニング・コンテンツではありません。

そのため、独立した区切りではないため、サイト名は「ページ全体に関係している」ということになります。

footer 要素も同様です。

セクショニング・コンテンツには見出しが必要

セクショニング・コンテンツには
見出しが必要です。
見出しは、h1〜h6 要素のいずれから始めても構いません。

例えば今までの (X)HTML の場合、サイト名は h1、記事見出しは h2 のようにすることが多いかと思いますが、それを維持して article 内の見出しは h2 からはじめても、h1 からはじめても構いません。

HTML5でサイトをリニューアルするした時の失敗例

XHTMLをHTML5に変更する

(X)HTMLでこのようなページがあったとします。
これをHTML5に変更する場合を考えてみましょう。

XHTMLをHTML5に変更する

header 要素はセクショニング・コンテンツではないので、セクショニング・コンテンツが必要だと考え、その内側に section 要素を入れて区切りを作ってみた場合、これは問題ありませんでしょうか?

実は、とあるテレビ局のWebサイトが HTML5 でリニューアルされた時にこのようになっていました。

XHTMLをHTML5に変更する

前の図のようにマークアップすると、サイト名が header 要素の中の section 要素の中のみに有効ということになってしまい、それ以外の箇所はサイト名やロゴとは無関係ということになってしまいます。

XHTMLをHTML5に変更する

というわけで、単純に header タグで囲み、section 要素などのセクショニング・コンテンツでは囲まない方が良いということになります。

※「HTML5再入門講座」では、この後 aside 要素や nav 要素などの解説、(X)HTML で書かれたページを HTML5 で書き直す実習など行いましたがこの記事では省略させていただきます。

渋谷で開催している無料や低価格の講座について

「HTML5再入門講座」以外にも、渋谷 Stocker.jp / Space では無料や低価格の講座を毎月1回程度開催予定です。

6月は、なんとなく「黒い画面(ターミナル)のことを知らないとまずいんじゃないか」と思っているけど勉強できていない…という方に向けた Web制作者のための黒い画面(ターミナル)入門講座 を開催します。ご興味ある方はぜひどうぞ。

今後は、7月にプログラミング完全未経験の方に向けた、「子ども向けプログラミング環境 Scratch でプログラミングの考え方を学ぼう」などの講座を開催予定です。

ご興味ある方は、メール登録 をしていただければ開催の際お知らせします。

If you like this article click the Facebook “Like” button to share it with your friends!