HTML5のグルーピングコンテンツ～その３～

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

グルーピングコンテンツ関連

figure要素

自己完結型で、通常はメインフローから参照されるコンテンツを表す。
イラスト、図、写真、コードリストなどに注釈を付けることができる。

<p>コードを表示する</p>
<figure>
    <figcaption>とりあえずvarで宣言</figcaption>
    <pre><code>
    var chocopai='';
    chocopai = 'tabeta';
    </code></pre>
</figure>

カテゴリ
・フローコンテンツ
・セクショニングルート
・パルパブルコンテンツ

コンテンツモデル
・フローコンテンツ
・figcaption要素

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

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

figcaption要素

親要素のfigureタグのキャプションや凡例を表す。

カテゴリ
・なし

コンテンツモデル
・フローコンテンツ

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

タグの記載場所
・figure要素の子要素

main要素

ドキュメントまたはアプリケーションのbody要素のメインコンテンツを表す。
セクショニングコンテンツではないのでアウトラインには影響ない。
ドキュメントに固有のコンテンツが含まれ、サイトナビゲーションリンク、著作権情報、サイトロゴ、バナー、検索フォームなど、一連のドキュメントで繰り返されるコンテンツは含めない。

<header>
....
</header>
<main>
<p>メインなコンテンツを書くよ</p>
</main>
<fotter>
.....
</fotter>

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

コンテンツモデル
・フローコンテンツ

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

タグの記載場所
・フローコンテンツ( article, aside, footer, header, nav要素の中では使用不可)

div要素

他に適切な要素がない場合に用いる。div要素の代わりにより適切な要素を用いることでアクセシビリティが向上する。
スタイル上の目的やセクション内の複数の段落を折り返す場合などに使用される。

<div class="style1">
    <p>何か食べたいなー</p>
</div>

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

コンテンツモデル
・dl要素の子要素の場合：1つ以上のdt要素とそれに続くdd要素(必要に応じてscript、template要素を含む)
・dl要素の子要素ではない場合：フローコンテンツ

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

タグの記載場所
・フローコンテンツが配置できる場所
・dl要素の中