sectionとarticleの違いについて[使い方も解説]

今回は、section要素とarticle要素の違いについて解説します。

sectionとarticleの違いについて

まずは、以下の使用例をご覧ください。

<header>
・・・
</header>

//見出し(h1〜h6）のある要素に使う
<section>
     <h2>見出し</h2>
     <P>テキストテキストテキストテキストテキストテキストテキストテキスト</p>
</section>

//新着記事などの要素に使う
<article>
      <h2>見出し</h2>
         <section>
                 <h3>小見出し</h3>
                 <p>テキストテキストテキストテキストテキストテキストテキスト</p>
         </section>
</article>

<footer>
・・・
</footer>

このように、sectionとarticleの違いは、

section　＝　サイトの中で、1つのブロックを指し、<section>の中に、見出し（h1〜h6)を入れる。

article　＝　サイト内の新着記事などの要素を作る際、<article>で記事要素を囲みます。

このように、見出しを伴う要素には<section>、記事要素には<article>を使うと覚えておきましょう！

他にもブロックで囲む要素として、

div ＝　単体では、意味を持たないが、<div>で囲んだ範囲は1つのかたまりとして認識される

aside ＝　補足を表す要素に対して使用される

が挙げられます。

まとめ

・section　＝　見出し（h1〜h6)を伴うブロックに使用する

・article　＝　新着記事などの記事要素のブロックに使用する

今回は、sectionとarticleの違いについて