divタグ,sectionタグ、articleタグの整理

＜HTML＞-div,section,articleの違いについて

HTML５から学習を開始して、div,section,articleの違いについて理解が浅かったので調べた事を含めて備忘録
※お気付きの点があればご指摘よろしきお願い致します。

参考：articleタグとsectionタグとdivタグ,HTMLクイックリファレンス,oli.jp

divタグ

HTML５以前のdivの使い方は、「header」、「footer」などをidの名称に指定して使用。現在では、「header」、「section」、「article」、「nav」、「footer」などの要素(タグ)が追加されたことで、検索エンジンにWEBページの構造をより明確に伝えることができるようになった。

• divタグは、ひとかたまりの範囲として定義する際に使用。特に意味はない。
• 他に適切な要素が無い場合の使用が推奨されている。
  →ウェブページのアクセシビリティやメンテナンス性が低下を招く
• div 自体に意味はないため section や article を内包可

  articleタグ

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

<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>

sectionタグ

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

<section id="main-content">
    <article>
        <h1>Article title</h1>
        <p>Summary</p>
    </article>
    <article>
        <h1>Article title</h1>
        <p>Summary</p>
    </article>
    <article>
        <h1>Article title</h1>
        <p>Summary</p>
    </article>
</section>