HTML5のアウトラインにおけるセクションと見出し【HTML】

従来のHTMLだとヘッダーやフッターでもdiv要素などにclassやidをつけていたと思いますが、HTML5では特に構造化が意識されるようになって、構造化タグというのが決められました。

構造化タグというのは、HTML5におけるアウトラインを明確にするためのもので、ヘッダー部分は「<header>〜</header>」と記述したり、フッター部分は「<footer>〜</footer>」と記述したりと、わかりやすくしたものです。

また、文書におけるテーマごとのそれぞれの枠組みのことをセクションといい、HTML5を学ぶ上でも基本となることなので、HTML5を構成するセクションや見出しについて紹介します。

main

mainは文書内において、主要とされるコンテンツを表すための要素です。

主要なコンテンツには、ヘッダー・ナビゲーション・検索フォーム・フッター情報などは含みません。

main要素にはグローバル属性を使うことができます。

article

articleは文書内において、独立した記事セクションを表します。

ブログやメディアサイト、ニュースサイトなどの各記事やそれらの記事のコメントなどです。

article要素を入れ子にして使うときには、子孫要素となるarticle要素は祖先要素にあたるarticle要素の内容に関連している内容を表します。

section

section要素は、見出しや文章による章や節を意味するセクションを表す要素です。

nav

navは文書内において、グローバルナビゲーションやサイドメニューなどによく設置するカテゴリ一覧などの主要なナビゲーションを表す要素です。

主要なナビゲーションでないものに関しては、nav要素を使わずに、WAI-ARIAというコンテツの役割を示すための属性を使って、「role=”navigation”」と指定した方がいいと思います。

関連記事
『WAI-ARIAはコンテンツの役割や状態などの情報を正確に伝える』

aside

aside要素は、補足情報を表す要素です。

たとえば、用語の説明だったり、脚注などがこれにあたるのですが、広告も補足情報に含みます。

aside要素の内容はあくまで補足情報なので、この要素がないと本筋の意味が通らなくなるような内容はaside要素で扱うべきではありません。

h1・h2・h3・h4・h5・h6

h1やh2タグなどはセクションの見出しを表すもので、全部で「h1,h2,h3,h4,h5,h6」まであります。

数字は見出しのレベルを意味していて、h1が一番大きな見出し、h6が一番小さい見出しです。

たとえば記事において、h1やh2が大見出しとすると、h3とh4が中見出し、h5とh6が小見出しといった感じの方がイメージしやすいかなと思います。

ちょっと例えとしてわかりづらいかもしれないですけどこんな感じ。

関西の都道府県と県庁所在地についての記事があったとして、大見出しのタイトル、そして次の見出しとして各都道府県名、さらに次の見出しとして各県庁所在地名みたいな感じで書きます。

このとき、同じ見出し要素を使っていれば、同じレベルの見出しなんだなということがわかります。

このブログだとh3ぐらいまでは使うことがけっこうあって、h4はたまに使うという感じなんですけど、h5とかh6はあまり使ったことがないです。

ただ見出しタグはSEO的にも影響があるので、少し意識して使った方がいいと思います。

header

headerは文書やセクションのヘッダーを表すための要素。

トップページのヘッダーで使うときは、Webサイトのロゴやナビゲーションなども含むことが多いです。

また、セクションの見出しや概要、ナビゲーションなどを記述するときにもよく使われます。

footer

footerは文書やセクションのフッターを表す要素で、よくセクションの一番下（末尾）に置かれていることが多いと思うんですが、必ずしもそうじゃないといけないというわけではありません。

セクションの最初においても問題はありません。

ただ、フッターには著作者情報や関連記事へのリンクなどを記述するときによく使うので、自然とセクションの末尾に配置されるのかなと思います。

address

最後はaddressです。

直近の祖先要素にあたるbody要素もしくはarticle要素に対する連絡先情報を表すための要素です。

祖先要素がbody要素なら、文書全体に対する連絡先情報になりますし、article要素であれば、その要素の各記事に対する連絡先情報を示すことになります。

address要素はあくまでWebページを作成した人、記事を書いた人の連絡先情報を表すものなので、内容として記載される住所・電話番号・メールアドレス・公開日などの情報を表すときには使いません。

HTML5ではこういった構造化タグを使うことによって、それぞれの役割をよりシンプルで明確にコンピュータに伝えることができます。