2-8. コンテンツを区切るタグ（article・section）

1.articleタグ・sectionタグとは？

HTML5では、ドキュメントの構造が明らかにされたセマンティックな（単なる文字の羅列ではなく、意味がある）コードを書くことが推奨されています。

articleとsectionというタグは、見た目などに一切影響を及ぼさないので、一見意味があるのかわからないタグですが、ページ内のコンテンツの構造を明らかにする重要なタグです。

articleとsectionにはそれぞれの意味がありますので、それらを把握して上手に使い分けましょう。

2.<section>タグの使い方

<section>タグはひとかたまりの章（セクション）に使われる要素です。見出しが含まれる文章のひとかたまりを章と考えます。

例えばページ内の導入部分や、新着情報、連絡先などをこの<section>タグで囲います。

例：

<section>
  <h3>HTMLとは</h3>
  <p>HTMLは文章構造をマークアップする言語です。</p>
</section>

3.<article>タグの使い方

<article>タグはサイト内で独立したコンテンツとして成り立つものに使われる要素です。ブログの記事やニュースサイトの記事などが含まれます。複数の<section>を束ねたりして使うことが多いタグです。

例：

<article>
  <h2>HTMLの使い方</h2>
  <section>
    <h3>HTMLとは</h3>
    <p>HTMLは文章構造をマークアップする言語です。</p>
  </section>
  <section>
    <h3>HTMLの書き方</h3>
    <p>タグで文章を囲います。</p>
  </section>
</article>

4.実際にsectionとarticleを使った例

それでは前回までに作ったindex.htmlの<main>〜</main>の中に、以下のHTMLを記述してみましょう。

<main>
  <h1>ウェブサイトの作り方</h1>
  <article>
    <h2>HTMLの使い方</h2>
    <section>
      <h3>HTMLとは</h3>
      <p>HTMLは文章構造をマークアップする言語です。</p>
    </section>
    <section>
      <h3>HTMLの書き方</h3>
      <p>タグで文章を囲います。</p>
    </section>
  </article>
</main>

以下のようにブラウザで表示されます。