sectionタグとarticleタグの具体的な違いと使用例

Yamato Nagata

<section>タグと<article>タグは、両方ともHTML5で導入されたブロックレベル要素であり、ウェブページの構造化に役立ちます。

<section>タグは、文書内の論理的なグループ（章、節、ヘッダーなど）を表し、通常、見出しを伴います。しかし、<section>タグは、単独で意味を持つ必要はなく、その中には自己完結的な構造が含まれることが期待されます。つまり、<section>タグは、文書のセクションを定義するために使用されます。

一方、<article>タグは、完全な自己完結型の文書、投稿、記事、ブログエントリ、ニュース記事などの単独のコンテンツを表します。つまり、<article>タグは、ページ内のメインコンテンツを表すために使用されます。また、<article>タグは、一意のURLで参照できる単独のコンテンツの断片を表すこともできます。

以下は、<section>タグと<article>タグの使用例です。

<body>
  <header>
    <h1>My Blog</h1>
  </header>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/blog/">Blog</a></li>
      <li><a href="/about/">About</a></li>
    </ul>
  </nav>
  <main>
    <section>
      <h2>Section 1</h2>
      <p>Section 1 content</p>
    </section>
    <article>
      <header>
        <h2>Article 1</h2>
        <p>By John Doe</p>
      </header>
      <p>Article 1 content</p>
    </article>
    <section>
      <h2>Section 2</h2>
      <p>Section 2 content</p>
    </section>
    <article>
      <header>
        <h2>Article 2</h2>
        <p>By Jane Smith</p>
      </header>
      <p>Article 2 content</p>
    </article>
  </main>
  <footer>
    <p>Copyright (c) My Blog</p>
  </footer>
</body>

この例では、<section>タグは、<article>タグよりも広いコンテキストを表すために使用されています。<article>タグは、個々の記事のために使用され、見出し、投稿者名、本文などの要素が含まれています。


いつも記事を読んでいただき、ありがとうございます 何かを感じたり、考えるきっかけになったりしたら、とても嬉しいです。