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

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

セクショニングコンテンツのタグ

article要素

<article>
    <header>
        <h2>記事のタイトルだよん</h2>
     </header>
     <p>記事の内容だよんだよんだよん</p>
</article>

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

コンテンツモデル
・main要素を除いたフローコンテンツ

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

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

雑誌、新聞、技術または学術論文、エッセイまたはレポート、ブログ、または他のソーシャルメディアの投稿のようなそれだけで完結しているコンテンツをマークアップする。

section要素

<section>
    <h2>りんご</h2>
    <p>りんごは美味しいよねーー！！</p>
</section>
<section>
    <h2>いちご</h2>
    <p>いちごは美味しいよねーー！！</p>
</section>

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

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

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

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

ドキュメントやアプリケーションの一般的なセクションのコンテンツをマークアップする。
完結型のコンテンツはarticle要素でマークアップすることが推奨されている。
それぞれのセクションは、section要素の子要素としてヘッディング要素含めて識別すべきである。

nav要素

<nav>
    <ul>
        <li><a href="/">TOP</a></li>
        <li><a href="/page1/">page1</a></li>
        <li><a href="/page2/">page2</a></li>
    </ul>
</nav>

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

コンテンツモデル
・main要素を除いたフローコンテンツ

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

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

外部ページへのリンクやナビゲーションのコンテンツをマークアップする。

aside要素

<aside>
    <h2>広告とか</h2>
    <p>広告の内容だよん</p>
</aside>

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

コンテンツモデル
・main要素を除いたフローコンテンツ

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

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

関連情報やメインコンテンツから分離させたいコンテンツをマークアップする。
本文からの抜粋を使ったリード文やサイドバー、広告、nav要素のグループなどに使うことができる。