Section / Article / Figureタグについて

Section タグ

セクション（章や節）を表す。

index.html

<section>
  <h1>見出し</h1>
  <p>本文</p>
</section>

・ 見出しが必ずあること
見出しが無い =　章や節ではない = sectionではない

・ 章や節の区切りやまとまりなどに使用
・ 意味や機能のまとまり
・ div と違い、文脈的な意味があるコンテンツに対し使用する。 よってsection 内には見出しが必須
・ 文章の論理構造用タグ
・ article同様、基本的にレイアウトのためには使わない
・ articleを内包可
・ 無理して使わなくてもよい
・コンテナーとして使うならdivを使用

Article タグ

ページのメインコンテンツを表す要素

index.html

<article>
    <h1>Title</h1>
    <section>
        <h2>Section title</h2>
        <p>Content</p>
    </section>
    <section>
        <h2>Section title</h2>
        <p>Content</p>
    </section>
    <section>
        <h2>Section title</h2>
        <p>Content</p>
    </section>
</article>

・ ブログの投稿や記事１件、コメント１件分など独立して成立するコンテンツに使用
・article は section 同様、文脈的な意味がある コンテンツに対し使用
・内側の article が、外側の article の内容と関係がある場合、article を内包（ネスト）することができます。またsectionも内包できる。
・レイアウトのために基本的はdivを使用使わない
・無理して使わなくてもよい

Figureタグ

画像などのまとまりを表す時に使用します。
具体的にはコンテンツに挿入する画像（写真）や、表、ソースコードなどを囲む。

index.html

<figure>
  <figcaption>
    注釈（説明文）
  </figcaption>
  <img src="" alt=""> //画像
</figure>

divタグでも良いが、figureタグで囲むことによって画像があることが判断しやすい。
またfigure要素は自己完結したもので、ドキュメントのメインのフローから単独のユニットとして参照されるものである必要がある。つまり、その部分を文書から切り出したとしても元の文書に影響がないとともに、切り出した内容自体で意味が通るようにする必要があります。また、figcaption要素によってキャプションを付与できます。