「HTML5プロフェッショナル認定試験レベル1(ver.2.0)」の試験対策の備忘録。
今回は、試験範囲でもある「セクションと見出しの基本構造」のまとめ。
ちなみに、2014年10月28日にW3Cによって「HTML5」が勧告され、2016年11月1日には「HTML5.1」へ、そして2017年12月14日には「HTML5.2」が勧告されました。2019年5月になって、W3CとWHATWGは“HTML Living standard”をHTML技術仕様の唯一の標準規格とすると合意しました。これにより現在は、WHATWGによって策定された「HTML Living standard」が「HTML5/5.1/5.2」に代わるHTML技術仕様の標準規格となっているが、2021年04月現在「HTML5プロフェッショナル認定試験レベル1(ver.2.0)」の試験範囲のHTMLのバージョンは「HTML5.1(※5.0については、5.1で非奨励になったものも一部出題される可能性がある)」だそうなので、「HTML5.1」をもとに書いています。
実際に受験してきた時の結果と感想はこちら↓をご覧ください。
先日、「HTML5プロフェッショナル認定試験レベル1(ver.2.0)」の認定試験を受験してきました。 これまで20年以上、Webサイト制作の仕事に携わってきた私ですが、今回受験してみた率直な感想は... 「[…]
セクションと見出しの関係
セクショニングコンテンツに分類される４つの要素（article要素・section要素・aside要素・nav要素）はそれぞれ、その範囲が１つのセクションであることを示す。
HTMLのセクションとは、見出しとそれに対応する文章全体を含む範囲のことで、長い文章における「章」や「節」、新聞やブログなどの「１つの記事」などがこれにあたる。ただし、見出しとセクショニングコンテンツは常に１対１のセットで使用する決まりになっているわけではなく、「見出しのないセクショニングコンテンツ」も存在すれば「セクショニングコンテンツのない見出し」も存在する。
「見出しのないセクショニングコンテンツ」は、そのまま見出しのないセクションとなるが、「セクショニングコンテンツのない見出し」については内部的にはセクションが存在するものとして認識される点に注意が必要。つまり、見出しがあるだけでそこにはセクションが存在することになるということ。このような実際のタグを伴わないセクションは暗黙のセクション（implied section）と呼ばれ、ルールでその範囲や階層が判断される仕様となっている。
セクショニングコンテンツの中にある最初の見出しは、そのセクションの見出しとしてセットで扱われる。
セクショニングコンテンツを伴わない２つめ以降の見出しがあった場合、前の見出しと比較して見出しのランク（１～６の数字であらわされている階層）が同じか上であれば、そこで前の見出しのセクションは終了し、新しい暗黙のセクションが開始される。
セクショニングコンテンツを伴わない２つめ以降の見出しがあった場合、前の見出しと比較して見出しのランク（１～６の数字であらわされている階層）が下であれば、前の見出しのセクション内に含まれる暗黙のサブセクションが開始される。
セクショニングコンテンツと見出しのタグがセットで使用されている場合は、常にそのセクションを含むもっとも近いセクション（またはセクショニング・ルート）のサブセクションになる。（※見出しのランクでは判断されない）
このようなルールはあるが、常に見出しとセクショニングコンテンツはセットで使用し、見出しは階層に合わせた適切なランクのものを使用することが推奨されている。
アウトライン
アウトラインとは、検索エンジンから見たWEBページの構造を表す概念。アウトラインには「明示的なアウトライン」と「暗黙的なアウトライン」の2種類がある。
アウトライン解析ツール
下記のツールを使えば、Webページのアウトラインを解析できる。
セクショニング・ルート
その範囲が外部とは別の独立したセクションを持つ「セクションのルート要素」となり、内容として含んでいる見出しやセクショニングコンテンツが外部のアウトラインに一切影響を与えなくなる要素をセクショニング・ルートという。
HTML5.1では、次の６つの要素がセクショニング・ルートとして定義されている。
body / blockquote / fieldset / figure / td / details
※セクショニング・ルート内の最初の見出しは、（アウトラインとしては）そのセクショニング・ルートの見出しとなる。
h1～h6要素（フロー／見出しコンテンツ）
h1～h6要素は、セクションの見出しとなる要素。１～６の数字は見出しのランク（階層）をあらわしており、１が最もランクの高い大見出し、６が最もランクの低い見出し。
h1～h6要素のいずれかを配置すると、そこにセクション関連の要素がなくても暗黙のセクションが生成され、アウトラインにもその見出しが追加される。
article要素（フロー／セクショニングコンテンツ）
article要素はそれだけで全部、それだけで完結しているセクションをあらわす場合に使用する。
section要素（フロー／セクショニングコンテンツ）
section要素は、一般的なセクションをあらわす要素。HTML5のセクショニングコンテンツは全部で４つあるが、article、nav、aside要素は特定の用途向けであり、section要素は、それらに該当しない普通のセクションをマークアップする場合に使用する。
全体を含んでいるならarticle要素、全体の一部分であればsection要素。
aside要素（フロー／セクショニングコンテンツ）
aside要素は、その内容がそれを含んでいるセクションの内容とは関係が薄く、別扱いにした方がよさそうなセクションをマークアップする場合に使用。
nav要素（フロー／セクショニングコンテンツ）
nav要素は、そのページにおけるナビゲーションのリンクを含むセクションをあらわす場合に使用。
ただしnav要素は、ページの情報を音声で読み上げさせるユーザーなどが、ナビゲーションを読み飛ばしたり、逆にナビゲーションをすぐに読み上げさせたりするために利用することも考慮して用意されたものであるため、あくまで主要なナビゲーションだけに使用することが想定されている。
従って、nav要素がページ内の多くの箇所にあると、そのような利用が難しくなる可能性もあるため、例えばフッター領域にあるリンクなどには基本的には使用しない。（※どうしても必要であれば使用可）
header要素（フローコンテンツ）
header要素は、自分自身を含むもっとも近いセクションまたはセクショニング・ルートのヘッダーであることを示す要素。
もっとも近い要素がbody要素だった場合、ページ全体のヘッダーとなる。
一般に、header要素の内容としては、見出し・ナビゲーション・ロゴ・検索フォーム・目次などを含む。通常は見出しを含みますが、必須ではない。
header要素の内容として、main要素は配置できない。
header要素の内容として、セクショニングコンテンツに含まれていない状態のheader要素とfooter要素は配置できない。
つまり、header要素内に配置されたセクショニングコンテンツの内容であれば、header要素とfooter要素は配置可能。
※HTML5.1でセクショニング要素内に配置されている場合、入れ子にすることができるようになった。
footer要素（フローコンテンツ）
footer要素は、自分自身を含むもっとも近いセクションまたはセクショニング・ルートのフッターであることを示す要素。
もっとも近い要素がbody要素だった場合、ページ全体のフッターとなる。
一般に、footer要素の内容としては、著作権情報・問い合わせ先(address要素)・関連文書へのリンク（ブログの「前ページ」「次ページ」など）・記事の執筆者名などを含む。
ただし、執筆者名に関しては、header要素に入れても問題ない。また、索引・奥付・付録・使用許諾契約のような内容のセクションは、そのセクションごとにfooter要素の中に入れることができる。
footer要素はセクション内の最後に配置するもののように思えるが、例えば「前のページ」「次のページ」というリンクを含むfooter要素などはセクションの前の方に配置してもかまわない。もちろん、前と後ろの両方に配置することもできる。
footer要素の内容として、セクショニングコンテンツに含まれていない状態のheader要素とfooter要素は配置できない。
つまり、footer要素内に配置されたセクショニングコンテンツの内容であれば、header要素とfooter要素は配置可能。
※HTML5.1でセクショニング要素内に配置されている場合、入れ子にすることができるようになった。
main要素（フローコンテンツ）
main要素は、その範囲がページ全体におけるメインコンテンツであることを示す要素。
main要素の内容には、そのページに特有のコンテンツのみを入れ、サイト内の複数のページで共通しているナビゲーションやロゴ、検索フォーム、著作権情報などのコンテンツは含めないようにする。
main要素はnav要素と同じく、たとえばページの情報を音声で読み上げさせているユーザーが、文書の最初の方にある情報を読み飛ばして、すぐにメインコンテンツの内容を聞くことができるようにすることも意図して用意されたもの。つまりmain要素に各ページで共通する内容を入れてしまうと、読み飛ばし機能の意味が薄れてしまうので注意が必要。
header要素とfooter要素は、セクショニング・ルートのヘッダーとフッターになるが、main要素は常にページ全体におけるメインコンテンツをあらわす点に注意。
main要素の親にできる要素は、body・div・form要素のみ！
address要素（フローコンテンツ）
address要素は、自分自身を含むもっとも近いarticle要素またはbody要素の内容に関する問い合わせ先を示す要素。article要素に含まれていない場合は、body要素に関する問い合わせ先を示していることになる。
address要素の内容として入れられるのは、問い合わせ先の情報だけ。著作権情報や更新日のような問い合わせ先以外の情報は入れられない。また住所であっても、それがarticle要素またはbody要素の内容に関する問い合わせ先ではない場合は使用できない。問い合わせ先ではない普通の住所には、p要素を使用する。
address要素の要素内容としてフローコンテンツ(Flow content)を入れることができるが、次の要素は入れられない。
h1～h6要素／section／article／aside／nav／header／footer／address
div要素（フローコンテンツ）
div要素は、あらかじめ決められた役割や意味を持たない要素。他に適切な要素がないような場合に使用する要素で、class要素やlang属性などを使用することで用途を示すことができる。
HTML5では、ブロックレベル要素／インライン要素という分類がなくなっているが、div要素はもともと「あらかじめ決められた役割や意味を持たないブロックレベル要素」として使用されてきた。これに対し、「あらかじめ決められた役割や意味を持たないインライン要素」がspan要素。分類はなくなったものの、両者の機能は基本的には変わっていない。
div要素は親要素として、h1～h6要素／p／ol／ul／table要素などは配置できない。
span要素（フロー／フレージングコンテンツ）
span要素は、あらかじめ決められた役割や意味を持たない要素。他に適切な要素がないような場合に使用する要素で、class要素やlang属性などを使用することで用途を示すことができる。