articleタグとsectionタグとdivタグ

divタグの使いどころ

複数の要素をグループ化させるために使う
意味は特にない
一番使い勝手がいいができれば多用しない方がいい（建前になってる気がする・・・）

sectionタグの使いどころ

文章の論理構造用タグ
章や節で使用する
見出しが入れ子になっている
基本的にレイアウトのためには使わない（レイアウトのためのグループはdiv要素）
–無理して使わなくてもよいと思う–

<h1>ゲームの紹介</h1>
<p>懐かしのファミコンソフトを紹介しています。</p>

<article>
    <h2>ドラゴンクエスト</h2>

    <section>
        <h3>ドラゴンクエスト１</h3>
        <p>町人に話しかけるのも一苦労な一人旅</p>
    </section>

    <section>
        <h3>ドラゴンクエスト２</h3>
        <p>「ふっかつのじゅもんがちがいます」と言われると途方に暮れる</p>
    </section>

    <section>
        <h3>ドラゴンクエスト３</h3>
        <p>ドラクエ３の勇者が後のロトになる</p>
    </section>
</article>

間違った使い方

見出しがないとダメ

<h1>ゲームの紹介</h1>
<p>懐かしのファミコンソフトを紹介しています。</p>

<article>
    <h2>ドラゴンクエスト</h2>

    <section>
        <p>ドラクエ４の勇者は始まりも終わりもひとりぼっちで悲しい</p>
    </section>

    <section>
        <p>ドラクエ５は結婚・出産を経て子供が勇者になる</p>
    </section>

    <section>
        <p>ドラクエ６はやっとことがない</p>
    </section>
</article>

articleタグの使いどころ

文章の論理構造用タグ
独立したコンテンツとして完結しているところに使用する
記事１件分やコメント１件分などに使う
基本的にレイアウトのために使わない（レイアウトのためのグループはdiv要素）
–無理して使わなくてもよいと思う–

<h1>東中野のおすすめスポット一覧</h1>
<p>東中野のおすすめスポットを紹介しています。</p>

<article>
    <header>
        <h2>しろぼし</h2>
        <p><time datetime="2017-10-22">2017年10月22日</time></p>
    </header>

    <p>お相撲さんが作るつけめんがおいしい</p>
    <p><a href="#">続きを見る</a></p>

    <footer>
        <p>カテゴリ：<a href="#">おいしいお店</a></p>
    </footer>
</article>

<article>
    <header>
        <h2>ポレポレ東中野</h2>
        <p><time datetime="2017-10-13">2017年10月13日</time></p>
    </header>

    <p>有名人が上映あいさつによくきている単館系映画館</p>
    <p><a href="#">続きを見る</a></p>

    <footer>
        <p>カテゴリ：<a href="#">映画館</a></p>
    </footer>
</article>