HTMLのarticleタグとsectionタグ【現役エンジニアが解説】

PROGRAM

今回は、HTMLのarticleタグとsectionタグについて、それぞれに分け、簡単に解説していきます。

articleタグは記事

articleタグは記事を一つにまとめます。

記事とは、要するにコンテンツのことで、論文等も含まれます。

<article>記事や論文の中身を書く</article>

上記のコードのように、articleタグの中に記事や論文を書いていきます。

sectionタグは章分け

sectionタグは記事の中のそれぞれの章をまとめます。

例えば、序論と本論、結論がある場合には、sectionタグは3つ使います。

<article>
    <section>序論</section>
    <section>本論</section>
    <section>結論</section>
</article>

上記のコードでは、序論と本論、結論の章をそれぞれsectionタグでまとめています。

h2タグは章の見出し、h3タグは節の見出し

h2タグは章の見出しに、h3タグは節の見出しに使います。

sectionタグと一緒に使う場合には、sectionタグ内の冒頭で使うことが多いです。

<article>
    <section>
        <h2>1.序論</h2>
        <h3>1.1.序論A</h3>
        <h3>1.2.序論B</h3>
        <h3>1.3.序論C</h3>
    </section>
    <section>
        <h2>2.本論</h2>
        <h3>2.1.本論A</h3>
        <h3>2.2.本論B</h3>
        <h3>2.3.本論C</h3>
    </section>
    <section>
        <h2>3.結論</h2>
        <h3>3.1.結論A</h3>
        <h3>3.2.結論B</h3>
        <h3>3.3.結論C</h3>
    </section>
</article>

上記のコードでは、序論と本論、結論の章を、それぞれsectionタグでまとめたうえで、h2やh3で見出しを付けています。