HTML セマンティックタグ

JPKODA 編集部 May 6, 2026

1. セマンティック HTML と構造要素

セマンティック HTML（Semantic HTML / 意味論的 HTML）の核心は、ウェブページの内容に「意味」を持たせ、ブラウザと開発者の双方にとって理解しやすくすることにあります。

単に <div> タグに依存してページ構造を構築するのではなく、セマンティック HTML では、内包するコンテンツの用途を記述する要素を導入します。これにより、アクセシビリティ（Accessibility）、SEO（検索エンジン最適化）、およびコード全体の保守性（Maintainability）が向上します。

本セクションでは、セマンティックなウェブページを構築するための礎となる <header>、<nav>、<article>、<aside>、および <footer> タグについて深く掘り下げていきます。

2. `<header>`タグ

<header> タグは、紹介的なコンテンツやナビゲーションリンクのセットを表します。通常、以下のような要素が含まれます。

ウェブサイトのロゴやブランド識別子
メインの見出し (<h1> - <h6>)
検索フォーム
ナビゲーションリンク（ただし、主要なナビゲーションは <nav> がより適しています）

一つのページに複数の <header> 要素を配置することが可能です。例えば、一つはサイト全体のメインヘッダーとして、もう一つは特定の <article> 内のヘッダーとして使用するといった具合です。

サンプルコード：

<header>
  <img src="logo.png" alt="マイウェブサイトのロゴ">
  <h1>素晴らしいウェブサイトへようこそ</h1>
  <p>当サイトについての簡単な紹介文です。</p>
</header>

解説：

<header> タグは、この部分がページの紹介セクションであることを明確に識別します。
<img> タグでサイトロゴを表示します。
<h1> タグでページのメインタイトルを提供します。
<p> タグで簡単な説明を提供します。

実際の応用：
ブログを構築していると想像してください。各ブログ記事は、記事タイトル、著者、公開日を含む独自の <header> を持つことができます。一方で、サイト全体もロゴとナビゲーションを含むメインの <header> を持つことになります。

3. `<nav>` タグ

<nav> タグは、ページ内でナビゲーションリンクを含むセクションを表します。これは、あらゆるリンクの集まりではなく、主要なナビゲーションエリア専用として使用されます。

サンプルコード：

<nav>
  <ul>
    <li><a href="/">ホーム</a></li>
    <li><a href="/about">私たちについて</a></li>
    <li><a href="/services">サービス</a></li>
    <li><a href="/contact">お問い合わせ</a></li>
  </ul>
</nav>

解説：

<nav> タグは、このセクションが主要なナビゲーションであることを明確に識別します。
<ul> と <li> タグを使用して、リンクの無順序リストを作成します。

<nav> を使用すべきではないケース：
ページのフッターにあるシンプルなリンク一覧などは、必ずしも <nav> タグを必要としません。それらのリンクが「重要なナビゲーションセクション」を構成しているかどうかで判断してください。

4. `<article>` タグ

<article> タグは、ドキュメント、ページ、アプリケーション、またはサイト内において、独立した構成要素であることを表します。それは、それ自体で独立して配信されたり、再利用されたりできるものであるべきです。

一般的な例：

ブログの記事
ニュースレポート
フォーラムの投稿
雑誌の記事

サンプルコード：

解説：

<nav> タグは、このセクションが主要なナビゲーションであることを明確に識別します。

<ul> と <li> タグを使用して、リンクの無順序リストを作成します。

<nav> を使用すべきではないケース：
ページのフッターにあるシンプルなリンク一覧などは、必ずしも <nav> タグを必要としません。それらのリンクが「重要なナビゲーションセクション」を構成しているかどうかで判断してください。

解説：

<article> タグはブログ記事全体をカプセル化します。
<h2> タグで記事のタイトルを提供します。
<time> タグで特定の時間を表します。

<article> 要素のネスト：<article> 要素は相互にネスト（入れ子）にすることができます。例えば、一つのブログ記事が複数のコメントを含み、各コメント自体も一つの独立した <article> として扱うことができます。

5. `<aside>` タグ

<aside> タグは、ページ内でメインコンテンツと間接的に関連する（余談的な）部分を表します。

主に以下の用途で使用されます：

サイドバー
プルクオート (Pull quotes / 引用の強調表示)
広告
関連記事へのリンク

サンプルコード：

<aside>
  <h3>関連記事</h3>
  <ul>
    <li><a href="#">記事 1</a></li>
    <li><a href="#">記事 2</a></li>
    <li><a href="#">記事 3</a></li>
  </ul>
</aside>

解説：

<aside> タグは、このセクションを補足コンテンツとして識別します。
<h3> タグでサイドバーの見出しを提供します。

<aside> の配置場所：<aside> 要素は、メインコンテンツとの関係性に応じて、<article> の内部にも外部にも配置できます。記事に直接関連する場合は内部に、サイト全体に関わるような汎用的なものであれば外部に配置します。

6. `<footer>` タグ

<footer> タグは、セクションまたはページのフッターを表します。通常、以下のような内容が含まれます。

著作権情報 (Copyright)
連絡先情報
利用規約
プライバシーポリシー
サイトマップ
ソーシャルメディアへのリンク

一つのページに複数の <footer> 要素を配置できます。例えば、一つはサイト全体のメインフッター、もう一つは特定の <article> 内のフッターとして使用します。

サンプルコード：

<footer>
  <p>© 2026 マイウェブサイト. All rights reserved.</p>
  <p><a href="/contact">お問い合わせ</a> | <a href="/privacy">プライバシーポリシー</a></p>
</footer>

解説：

<footer> タグは、この部分がフッターであることを明確に識別します。

7. 総合演習：要素の組み合わせ

これらすべての要素を組み合わせて、一つの完全なサンプルを作成してみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>セマンティック HTML ページの実装例</title>
</head>
<body>

  <header>
    <img src="logo.png" alt="マイウェブサイトのロゴ">
    <h1>素晴らしいウェブサイトへようこそ</h1>
    <p>Web 開発に関する情報をお届けするサイトです。</p>
  </header>

  <nav>
    <ul>
      <li><a href="/">ホーム</a></li>
      <li><a href="/blog">ブログ</a></li>
      <li><a href="/about">サイトについて</a></li>
      <li><a href="/contact">お問い合わせ</a></li>
    </ul>
  </nav>

  <article>
    <h2>初めてのブログ投稿</h2>
    <p>公開日：<time datetime="2023-10-27">2023年10月27日</time></p>
    <p>これは私の最初のブログコンテンツの内容です...</p>
  </article>

  <aside>
    <h3>関連記事</h3>
    <ul>
      <li><a href="#">記事 1</a></li>
      <li><a href="#">記事 2</a></li>
    </ul>
  </aside>

  <footer>
    <p>© 2023 マイウェブサイト. All rights reserved.</p>
  </footer>

</body>
</html>

この例は、<header>、<nav>、<article>、<aside>、および <footer> タグを使用して、基本的なウェブページをセマンティック（意味論的）に構築する方法を示しています。これにより、情報の構造が明確になり、マシンと人間の両方にとって使いやすいウェブサイトになります。

1. セマンティック HTML と構造要素

2. <header>タグ

3. <nav> タグ

4. <article> タグ

5. <aside> タグ

6. <footer> タグ

7. 総合演習：要素の組み合わせ

2. `<header>`タグ

3. `<nav>` タグ

4. `<article>` タグ

5. `<aside>` タグ

6. `<footer>` タグ