sectionやarticleの使い分け！よく使うセマンティック要素の使い方を初心者向けに解説

公開日：2025-12-16

HTML

コーディングを学び始めた初学書の方にとって、最初に使いどころに迷うのがsectionタグやarticleタグといったセマンティック要素ではないでしょうか？

sectionタグやarticleタグなどは見た目上はdivタグで代用できるため、「とりあえずdivで書いている」「あえて使っていない」という方もいるかもしれません。

しかし、セマンティック要素は正しく使うことで、文書構造が明確になり、検索エンジンにページの内容を正しく伝えられるようになります。

今回は、よく使用されるセマンティック要素「section・article・nav・header・footer・main・aside」タグの使い方を詳しく解説します。

セマンティック要素とは？

セマンティック要素は、HTMLでコンテンツの意味や役割を明確にするタグのことを言います。

一般ユーザーには、どこがヘッダー部分で、どこがフッター部分なのかが見て分かってもらえますが、検索エンジンは見た目で判断できません。

しかし、セマンティック要素を使ってマークアップすることで、文書の構造を検索エンジンやスクリーンリーダーに分かりやすく伝えることができます。

また、その結果、SEOの向上につながるだけでなく、コードの可読性や保守性も高まり、後から自分や他人が見返したときにも理解しやすいHTMLになります。

◾️セマンティック要素を使用するメリット

検索エンジンがページ内容を正しく理解しやすくなり、結果としてSEOの評価向上につながる。
音声読み上げソフトがページ内容を正しく理解することで、目の不自由なユーザーに配慮した形で読み上げが行われるようになる。
コードの可読性や保守性が高まる。

よく使用されるセマンティック要素

セマンティック要素には、ここで紹介するタグ以外にもさまざまな種類がありますが、本記事では、よく使用される代表的なもののみを紹介します。

headerタグ：サイト全体のヘッダーやコンテンツの冒頭部分を定義

headerタグは、ヘッダーを定義するのに使用されるセマンティック要素です。

最も一般的な使い方としては、Webサイト全体のヘッダーを表す目的で使用されます。

<header class="header">
  <div class="header__left">
    <h1>サイトタイトル</h1>
    <p>キャッチコピー</p>
  </div>
  <div class="header__right">・・・</div>
</header>

また、後ほど紹介するsectionやarticleの中で使用した場合は、Webサイト全体のヘッダーとしてではなく、それぞれのセクションや記事の見出し部分として定義できます。

<section class="service">
  <header class="service__header">
    <h2>サービス紹介</h2>
    <p>当社が提供しているサービスの一覧です。</p>
  </header>

  <ul class="service__lists">
    <li class="service__list">・・・</li>
    <li class="service__list">・・・</li>
    <li class="service__list">・・・</li>
  </ul>
</section>

sectionタグやarticleタグは、セマンティック要素であると同時に「セクショニング要素」と呼ばれるカテゴリーに属しています。

◾️セクショニング要素

<article>
<aside>
<nav>
<section>

これらのセクショニング要素が、headerタグが「どの範囲に対するヘッダーなのか」を判断する基準となります。

◾️いずれかのセクショニング要素の中で使用されている場合
　→ その区分内のコンテンツを示すヘッダーを表す。

◾️セクショニング要素の外で使用されている場合
　→ Webサイト全体のヘッダーを表す。

footerタグ：サイト全体のフッターやコンテンツのフッター部分を定義

footerタグは、フッターを定義するのに使用されるセマンティック要素です。

こちらもheaderと同様に、最も一般的な使い方としてはWebサイト全体のフッターを表す目的で使用されますが、sectionやarticleといった要素の中で用いられる場合は、それぞれのコンテンツに対するフッターを表します。

<footer class="footer">
  <nav class="footer__navi">
    ・・・
  </nav>
  <small class="footer__copyright">©︎ 2025 E-VALUE WORKS.</small>
</footer>

mainタグ：ページ内の主要コンテンツを定義

mainタグは、ページ内の主要コンテンツに使用されるセマンティック要素です。

基本的に文書内で1回のみ使用することができます。（hidden属性が指定されている場合を除く）

グローバルナビゲーションやサイドバーなど、ページをまたいで繰り返し表示される共通要素は含めず、そのページ固有の主要なコンテンツのみを配置します。

<header class="header">・・・</header>
<main class="main">
  <article class="postContent">
    <h1>【Contact Form 7】ページタイトルの値をフォームに自動反映する方法（投稿・カスタム投稿・固定ページ）</h1>
    <p>・・・</p>
  </article>
</main>
<footer class="footer">・・・</footer>

asideタグ：主要コンテンツの補足情報に使用

asideタグは、主要コンテンツの補足情報に使用されるセマンティック要素です。

なくても主要コンテンツは成立する一方、あると便利なコンテンツ（例：サイドバーや関連記事、用語解説など）に使用されます。

<header class="header">・・・</header>
<main class="mainContent">・・・</main>
<aside class="sidebar">
  <div class="sidebar__item sidebar__item--search">
    <h3>記事を検索する</h3>
    <input type="text">
  </div>
  <div class="sidebar__item sidebar__item--recentPost">・・・</div>
</aside>
<footer class="footer">・・・</footer>

navタグ：ナビゲーションリンクを定義

navタグは、ナビゲーションリンクを定義するのに使用されるセマンティック要素です。

ヘッダー内のグローバルナビゲーションなど「ページ内の主要なナビゲーションリンク」に使用されます。

<header class="header">
  <div class="header__left">・・・</div>
  <div class="header__right">
    <nav class="gnav">
      <ul class="gnav__lists">
        <li class="gnav__list"><a href="/">ホーム</a></li>
        <li class="gnav__list"><a href="/company">会社情報</a></li>
        <li class="gnav__list"><a href="/contact">お問い合わせ</a></li>
      </ul>
    </nav>
  </div>
</header>

navタグはページ内で複数使用しても問題ありませんが（例：ヘッダーナビゲーション、フッターナビゲーションなど）、その場合はaria-labelledby属性を使ってそれぞれのナビゲーションが何を目的としたものなのかを明確にすると、よりアクセシビリティが向上します。。

<header class="header">
  <div class="header__left">・・・</div>
  <div class="header__right">
    <nav class="gnav" aria-labelledby="header-navigation">
      <h2 id="header-navigation" class="u-visuallyHidden">
        ヘッダーナビゲーション
      </h2>
      ・・・
    </nav>
  </div>
</header>

<footer class="footer">
  <nav class="footer__navi" aria-labelledby="footer-navigation">
    <h2 id="footer-navigation" class="u-visuallyHidden">
      フッターナビゲーション
    </h2>
    ・・・
  </nav>
  <small class="footer__copyright">©︎ 2025 E-VALUE WORKS.</small>
</footer>

上記のように記述することで、aria-labelledby属性によって各nav要素にラベルが関連付けられ、スクリーンリーダー利用者にもそれぞれのナビゲーションの役割が正しく伝わります。

参考：区分コンテンツのラベル付け

articleタグ：自己完結型コンテンツを定義

articleタグは、ページの中で「それ単体で意味が通じるコンテンツ」「自己完結型コンテンツ」を定義するのに使用されるセマンティック要素です。

たとえば、ブログ記事の本文や、アーカイブページに表示される各記事リストなどに使用されることがあります。

<header class="header">・・・</header>
<main class="main">
  <article class="postContent">
    <h1>【Contact Form 7】ページタイトルの値をフォームに自動反映する方法（投稿・カスタム投稿・固定ページ）</h1>
    <p>・・・</p>
  </article>
</main>
<footer class="footer">・・・</footer>

一点、articleは見出し（<h1>〜<h6>）などを含めて、何についての記事なのかが分かるようにすることが推奨されています。

また、articleは入れ子にすることもできますが、その場合、内側のarticleは外側のarticleに関連する内容を表します。

<article class="postContent">
  <h2>HTMLのarticle要素とは？sectionとの違い</h2>
  <p>article要素は、・・・。</p>

  <section class="comments">
    <h3>コメント</h3>

    <article class="comment">
      <h4>ユーザーA</h4>
      <p>とても分かりやすい解説でした！</p>
    </article>

    <article class="comment">
      <h4>ユーザーB</h4>
      <p>sectionとの違いがよく理解できました。</p>
    </article>
  </section>
</article>

sectionタグ：一般的なセクション・コンテンツのまとまりを定義

sectionタグは、一般的なセクション・コンテンツのまとまりを定義するのに使用されるセマンティック要素です。

汎用的に使用できる一方で、これまで紹介してきたセマンティック要素の中では優先順位が比較的低く、他に適切な要素（header、article、navなど）が使える場合は、そちらを優先して使用するのが望ましいとされています。

Webサイトなどによく見られる「他社との違い」や「お客様の声」といったコンテンツは、単体でもある程度意味は通じるものの、ページ全体の文脈の中で他のコンテンツと組み合わさることで、はじめて役割を果たすケースが多いため、このような場合にはsectionタグを使用します。

<header class="header">・・・</header>
<main class="main">
  <section class="mv">
    <h1>コーディング代行サービスならE-VALUE WORKS</h1>
    <a href="#">見積もり相談はこちら</a>
  </section>

  <section class="feature">
    <h2>弊所の特徴</h2>
    ・・・
  </section>

  <section class="faq">
    <h2>お客様の声</h2>
    ・・・
  </section>
</main>
<footer class="footer">・・・</footer>