HTML5のセクション～セクション関連のタグ～ - チョコパイを240こ食べたエンジニア

素人が書く備忘録
基本的にはHTML 5.2を元に記載。

セクション関連

以下のタグをセクショニングコンテンツ内で使用した場合、それらのセクション内の情報として認識され、
セクショニングコンテンツがないところで使用した場合、ドキュメント全体の情報として認識される。

h1 h2 h3 h4 h5 h6要素(ヘッディング要素)

それぞれのセクションの見出しを表す。
最上位の見出しはh1で最下位の見出しはh6となる。
見出しを使用してドキュメントのアウトラインを生成する。

セクショニングコンテンツのないヘッディング要素があった場合、暗黙のセクションが生成される。
セクショニングコンテンツ内にある最初のヘッディング要素は、そのセクションの見出しとなる。
2つ目以降のヘッディング要素が1つ目のヘッディング要素と同じか上位ランクのヘッディング要素ならば、新しい暗黙のセクションが生成される。
2つ目以降のヘッディング要素が1つ目のヘッディング要素より下位ランクのヘッディング要素ならば、暗黙のサブセクションが生成される。
2つ目以降のヘッディング要素がセクショニングコンテンツに囲われていたら、ランクに関係なくサブセクションとなる。

セクショニングルート内にある最初のヘッディング要素は、そのセクショニングルートの見出しとなる。

<body>
<h1>body要素の見出しh1</h1>
<section>
    <h2>body要素の1つ目のサブセクションの見出しh2</h2>
    <p>もじゃもじゃもあじゃもじゃ</p>
</section>
<section>
    <h2>body要素の2つ目のサブセクションの見出しh2</h2>
    <p>あばばばばばばばば</p>
</section>
<blockquote>
    <h2>blockquote要素(body要素からは独立して)の見出しh2※body要素のアウトラインには影響しない</h2>
</blockquote>
</body>

カテゴリ
・フローコンテンツ
・ヘッディングコンテンツ
・パルパブルコンテンツ

コンテンツモデル
・フレージングコンテンツ

コンテンツ属性
・グローバル属性

タグの記載場所
・フローコンテンツを配置できる場所

header要素

最も近い祖先のmain要素またはセクショニングコンテンツまたはセクショニングルートのヘッダー情報を表す。

<body>
    <header>body要素のヘッダー情報だよ</header>
    <article>
        <header>article要素のヘッダー情報だよ</header>
    </article>
</body>

カテゴリ
・フローコンテンツ
・パルパブルコンテンツ

コンテンツモデル
・フローコンテンツ(main要素や、セクショニングコンテンツ内にないheader要素やfotter要素は子孫として持つことができない)

コンテンツ属性
・グローバル属性

タグの記載場所
・フローコンテンツを配置できる場所

fotter要素

最も近い祖先のmain要素またはセクショニングコンテンツまたはセクショニングルートのフッター情報を表す。
著者や関連文書へのリンク、著作権データなどのセクションに関する情報や、
付録、索引、ライセンス情報などのドキュメント全体の情報をマークアップすることもできる。

<body>
・・・・・・・省略
    <article>
        <fotter>article要素のフッター情報だよ</fotter>
    </article>
    <fotter>body要素のフッター情報だよ</fotter>
</body>

カテゴリ
・フローコンテンツ
・パルパブルコンテンツ

コンテンツモデル
・フローコンテンツ(main要素や、セクショニングコンテンツ内にないheader要素やfotter要素は子孫として持つことができない)

コンテンツ属性
・グローバル属性

タグの記載場所
・フローコンテンツを配置できる場所