セマンティックHTMLとは？初心者向け３分でわかりやすく解説

セマンティックHTML（意味論的HTML）とは、Webページの構造やコンテンツを意味的に正しく表現するために使用されるHTMLのマークアップ方法です。

わかりやすく言うと、レイアウトや見た目を重視してタグを使うのではなく、意味に注目してタグを利用しよう！というのがセマンティックHTMLの考え方です。

このページではセマンティックHTMLって何？どんなときに利点があるの？普通のHTMLとは何が違う？という疑問をお持ちの方に、セマンティックHTMLの基本を１からわかりやすく解説します。

このページで学べる内容

セマンティックHTMLとは？
セマンティックHTMLで利用される代表的なタグ

タグ	説明
`<header>`	ページやセクションのヘッダーを示す。
`<nav>`	ナビゲーションリンクを含むセクションを示す。
`<main>`	ページの主要コンテンツ領域を示す。
`<article>`	独立して再利用可能なコンテンツ（ブログ記事、ニュース記事など）を示す。
`<section>`	関連するコンテンツのグループを示す。
`<aside>`	ページのメインコンテンツに関連するが、直接的には属さない補足情報を示す。
`<footer>`	ページやセクションのフッターを示す。
`<figure>`	図やイメージ、ビデオ、コードブロックなどの参照コンテンツを示す。
`<figcaption>`	`<figure>`内のコンテンツに対するキャプションや説明を示す。

Webエンジニアを目指す方であれば知らないと恥ずかしい基本知識の１つです。是非最後までご覧ください。

セマンティックHTMLとは
1. セマンティックHTMLのメリット
セマンティックHTMLのタグ
Webエンジニア向け→完全無料のHTML/CSS/JS ロードマップ

セマンティックHTMLとは

セマンティックHTML（意味論的HTML）とは、Webページの構造やコンテンツを意味的に正しく表現するために使用されるHTMLのマークアップ方法です。

参考　マークアップ言語とは？

セマンティックHTMLは、要素（タグ）を選ぶ際に、その要素が持つ意味を考慮して適切なものを選択することを重視しています。＝つまり、HTMLをレイアウトを整えるためだけに利用するのではなく、その構造の意味を表現するために利用するのがセマンティックHTMLということです。

例えば、表（tableタグ）をページのレイアウトを整える目的として利用する人がいますが、これはセマンティックではない例です。

あくまでも表形式で表すべき文章構造がある場合にtableタグを利用するのがセマンティックな考え方。

セマンティックHTML
要素（タグ）の意味を考慮して適切なものを選び、Webページの構造とコンテンツを明確に表現します。
セマンティックではないHTML
主にデザインや見た目に重点を置いてマークアップが行われることが多く、コンテンツの意味が明確でない場合があります。

よくあるセマンティックではないHTMLの例

<div>と<span>の過剰な使用
セマンティックではないHTMLでは、ページの構造を表現するために<div>や<span>が多用されることがあります。これらのタグは意味を持たないため、ページの構造が不明瞭になりがちです。

参考　divタグ / spanタグ

<div id="header">
  <div id="navigation">
    <!-- ナビゲーションリンク -->
  </div>
</div>
<div id="content">
  <div class="article">
    <!-- 記事の内容 -->
  </div>
  <div class="sidebar">
    <!-- サイドバーの内容 -->
  </div>
</div>
<div id="footer">
  <!-- フッターの内容 -->
</div>

<b>や<i>タグの使用
セマンティックではないHTMLでは、<b>や<i>タグが使われることがあります。これらのタグは、テキストの見た目を変更するだけで意味的な情報を持っていません。代わりに、<strong>や<em>タグを使って、テキストの重要性や強調を表現することが望ましいです。

<!-- 非推奨 -->
<p>このテキストは<b>重要</b>です。</p>
<p>このテキストは<i>強調</i>されています。</p>

<!-- 推奨 -->
<p>このテキストは<strong>重要</strong>です。</p>
<p>このテキストは<em>強調</em>されています。</p>

テーブルをレイアウト目的で使用
セマンティックではないHTMLでは、テーブルタグ（<table>）がページのレイアウト目的で使われることがあります。しかし、テーブルはデータの表現に使用すべきであり、レイアウトのためにはCSSを使うべきです。

<!-- 非推奨 -->
<table>
  <tr>
    <td>
      <!-- 左カラムの内容 -->
    </td>
    <td>
      <!-- 右カラムの内容 -->
    </td>
  </tr>
</table>

セマンティックHTMLのメリット

セマンティックHTMLはWebページの構造と意味を明確に表現することで、アクセシビリティ、SEO、メンテナンス性を向上させるという点でメリットがあります。

セマンティックなHTMLを利用するメリット

アクセシビリティ向上
セマンティックHTMLを使用すると、Webページの構造が明確になります。これにより、スクリーンリーダーや音声ブラウザなどの支援技術を使用しているユーザーが、ページのコンテンツにアクセスしやすくなります。
検索エンジン最適化（SEO）
セマンティックHTMLによって、検索エンジンはページの構造とコンテンツを正確に解析できます。これにより、検索結果のランキングにおいて適切な位置に表示される可能性が高まります。
メンテナンス性向上
セマンティックHTMLは、コードの可読性が高まります。これにより、他の開発者がコードを理解しやすくなり、メンテナンスやデバッグが容易になります。

セマンティックHTMLのタグ

セマンティックHTMLのタグを以下に示します。

タグ	説明
`<header>`	ページやセクションのヘッダーを示す。
`<nav>`	ナビゲーションリンクを含むセクションを示す。
`<main>`	ページの主要コンテンツ領域を示す。
`<article>`	独立して再利用可能なコンテンツ（ブログ記事、ニュース記事など）を示す。
`<section>`	関連するコンテンツのグループを示す。
`<aside>`	ページのメインコンテンツに関連するが、直接的には属さない補足情報を示す。
`<footer>`	ページやセクションのフッターを示す。
`<figure>`	図やイメージ、ビデオ、コードブロックなどの参照コンテンツを示す。
`<figcaption>`	`<figure>`内のコンテンツに対するキャプションや説明を示す。

HTML4では、ページの構造を表現するために主に<div>や<span>が使われていましたが、これらは意味を持たないため、構造が不明瞭でアクセシビリティが低いという問題がありました。これを解決するために、HTML5では導入されたのがセマンティックHTML。

したがって、セマンティックHTMLのタグは主にHTML5から導入されたものが多く、それ以前のHTMLバージョンでは利用できないものがあるという点に注意しましょう。

このページではセマンティックHTMLのタグの意味と使い方を簡単にわかりやすく網羅的に解説していきます。

HTML：<header>

HTMLの<header>要素は、Webページの上部に表示されるコンテンツのために使用されます。通常、ページのタイトル、ナビゲーションメニュー、検索フォームなどが含まれます。

<header>要素は、文書全体で1回だけ使用することが推奨されています。これは、ページのコンテンツが複数の<header>要素を持つことができるためです。

以下は、<header>要素の基本的な使用方法の例です。

<!DOCTYPE html>
<html>
  <head>
    <title>サンプルページ</title>
  </head>
  <body>
    <header>
      <h1>サンプルページ</h1>
      <nav>
        <ul>
          <li><a href="#">ホーム</a></li>
          <li><a href="#">ニュース</a></li>
          <li><a href="#">お問い合わせ</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <p>ここにページのメインコンテンツが表示されます。</p>
    </main>
  </body>
</html>

参考　hタグ / ulタグ / pタグ / aタグ

この例では、ページの上部に<header>要素が使用され、その中にページのタイトルとナビゲーションメニューが含まれています。また、<main>要素内にはページのメインコンテンツが表示されます。

<header>要素の注意点

<header>要素は<body>要素内でのみ使用することができる。
<header>要素はページの上部に表示されるものとして想定されており、それ以外の目的で使用することはできない。
<header>要素内には主にページ全体に関する情報が含まれることが推奨されている。

<header>要素は、ページの上部に表示されるコンテンツを表すための要素です。必要な情報を適切に配置し、ページのユーザビリティを高めることができます。

さらに詳しく学習したい方は以下の記事をご覧ください。

HTML：<nav>

<nav>要素は、ナビゲーションメニューを表すために使用されます。これは、Webページのヘッダー、フッター、またはサイドバーなど、ページ内のどこでも使用できます。

先ほどのサンプルコードのheaderタグにネストされて<nav>タグが利用されていることが分かります。

<!DOCTYPE html>
<html>
  <head>
    <title>サンプルページ</title>
  </head>
  <body>
    <header>
      <h1>サンプルページ</h1>
      <nav>
        <ul>
          <li><a href="#">ホーム</a></li>
          <li><a href="#">ニュース</a></li>
          <li><a href="#">お問い合わせ</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <p>ここにページのメインコンテンツが表示されます。</p>
    </main>
  </body>
</html>

<nav>要素の注意点

<nav>要素はナビゲーションメニューを表すためのものとして想定されており、それ以外の目的で使用することはできない。
<nav>要素内には、主にページのリンクが含まれることが推奨されている。
<nav>要素は、<header>、<footer>、またはサイドバーなどのセクション内で使用することができる。

<nav>タグの詳細は以下の記事をご覧ください。

HTML：<main>

<main>要素は、Webページのメインコンテンツを表すために使用されます。これには、テキスト、画像、ビデオ、音声など、ページの主要なコンテンツが含まれます。

<!DOCTYPE html>
<html>
  <head>
    <title>サンプルページ</title>
  </head>
  <body>
    <header>
      <h1>サンプルページ</h1>
      <nav>
        <ul>
          <li><a href="#">ホーム</a></li>
          <li><a href="#">ニュース</a></li>
          <li><a href="#">お問い合わせ</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <h2>メインコンテンツの見出し</h2>
      <p>ここにページのメインコンテンツが表示されます。</p>
      <img src="example.jpg" alt="サンプル画像">
    </main>
    <footer>
      <p>Copyright (C) 2023</p>
    </footer>
  </body>
</html>

参考　imgタグ

この例では、<main>要素が使用され、その中にページのメインコンテンツが含まれています。また、<header>要素と<footer>要素も使用されています。

<main>要素の注意点

<main>要素は、ページ内で1回だけ使用することを推奨。
<main>要素内には、主にページの主要なコンテンツが含まれることが推奨される。
<main>要素は、ページ全体を覆うコンテナーの中に配置することが推奨される。

<main>要素は、Webページのメインコンテンツを表すための要素です。必要なコンテンツを適切に配置し、ページの意図を明確にすることができます。

HTML：<article>

<article>要素は、Webページ内の独立したセクションに対して使用されます。これには、ブログ投稿、ニュース記事、フォーラムのスレッドなど、ページ内で独立しているコンテンツが含まれます。

<!DOCTYPE html>
<html>
  <head>
    <title>サンプルページ</title>
  </head>
  <body>
    <header>
      <h1>サンプルページ</h1>
      <nav>
        <ul>
          <li><a href="#">ホーム</a></li>
          <li><a href="#">ニュース</a></li>
          <li><a href="#">お問い合わせ</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <article>
        <h2>記事の見出し</h2>
        <p>ここに記事の本文が表示されます。</p>
      </article>
    </main>
    <footer>
      <p>Copyright (C) 2023</p>
    </footer>
  </body>
</html>

この例では、<article>要素が使用され、その中に記事のタイトルと本文が含まれています。また、<header>要素と<footer>要素も使用されています。

<article>要素の注意点

<article>要素はWebページ内の独立したセクションに対して使用される。
<article>要素内には、独立しているコンテンツが含まれることが推奨される。
<article>要素は、通常<main>要素内に配置される。

<article>要素は、Webページ内の独立したセクションを表すための要素です。必要なコンテンツを適切に配置し、ページの意図を明確にすることができます。

HTML：<section>

HTMLの<section>要素は、Webページ内のセクションに対して使用されます。これには、<article>要素と同様に、独立したコンテンツが含まれることがありますが、通常はより一般的なセクションを表します。

<!DOCTYPE html>
<html>
  <head>
    <title>サンプルページ</title>
  </head>
  <body>
    <header>
      <h1>サンプルページ</h1>
      <nav>
        <ul>
          <li><a href="#">ホーム</a></li>
          <li><a href="#">ニュース</a></li>
          <li><a href="#">お問い合わせ</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <section>
        <h2>セクションの見出し</h2>
        <p>ここにセクションのコンテンツが表示されます。</p>
      </section>
    </main>
    <footer>
      <p>&copy; 2023 サンプルページ</p>
    </footer>
  </body>
</html>

この例では、<section>要素が使用され、その中にセクションのタイトルと本文が含まれています。また、<header>要素と<footer>要素も使用されています。

<section>要素の注意点

<section>要素は、Webページ内のセクションに対して使用される。
<section>要素内には、通常、一連の関連するコンテンツが含まれる。
<section>要素は、<main>要素内に配置することが推奨されているが、独立したコンテンツを表す場合は<article>要素を使用することが推奨される。

HTML：<aside>

HTMLの<aside>要素は、Webページのメインコンテンツから独立したコンテンツを表すために使用されます。

例えば、サイドバー、広告、関連記事など。

<!DOCTYPE html>
<html>
  <head>
    <title>サンプルページ</title>
  </head>
  <body>
    <header>
      <h1>サンプルページ</h1>
      <nav>
        <ul>
          <li><a href="#">ホーム</a></li>
          <li><a href="#">ニュース</a></li>
          <li><a href="#">お問い合わせ</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <article>
        <h2>記事の見出し</h2>
        <p>ここに記事の本文が表示されます。</p>
      </article>
    </main>
    <aside>
      <h3>関連記事</h3>
      <ul>
        <li><a href="#">関連記事1</a></li>
        <li><a href="#">関連記事2</a></li>
        <li><a href="#">関連記事3</a></li>
      </ul>
    </aside>
    <footer>
      <p>&copy; 2023 サンプルページ</p>
    </footer>
  </body>
</html>

この例では、<aside>要素が使用され、その中に関連記事のタイトルとリンクが含まれています。また、<header>要素と<footer>要素も使用されています。

<aside>要素の注意点

<aside>要素はWebページのメインコンテンツから独立したコンテンツを表すために使用される。
<aside>要素内には、サイドバー、広告、関連記事などが含まる。
<aside>要素は、通常<main>要素内に配置されますが、<body>要素の中のどこでも使用することが可能。

HTML：<footer>

<footer>要素は、Webページのフッターを表すために使用されます。これには、著作権情報、リンク、連絡先情報などが含まれます。

以下は、<footer>要素の基本的な使用方法の例です。

<!DOCTYPE html>
<html>
  <head>
    <title>サンプルページ</title>
  </head>
  <body>
    <header>
      <h1>サンプルページ</h1>
      <nav>
        <ul>
          <li><a href="#">ホーム</a></li>
          <li><a href="#">ニュース</a></li>
          <li><a href="#">お問い合わせ</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <article>
        <h2>記事の見出し</h2>
        <p>ここに記事の本文が表示されます。</p>
      </article>
    </main>
    <footer>
      <p>&copy; 2023 サンプルページ</p>
    </footer>
  </body>
</html>

この例では、<footer>要素の中に著作権情報が含まれています。

<footer>要素の注意点

<footer>要素はWebページのフッターを表すために使用される。
<footer>要素内には、著作権情報、リンク、連絡先情報などが含まる。
<footer>要素は、ページ全体の最下部に配置することが推奨される。

HTML：<figure>

<figure>要素は、画像、イラスト、写真、図表などのメディア要素に関連する説明文やキャプションをまとめて表すために使用されます。

<figure>要素には<img>要素や<svg>要素を含めることができます。

参考　imgタグ

<!DOCTYPE html>
<html>
  <head>
    <title>サンプルページ</title>
  </head>
  <body>
    <header>
      <h1>サンプルページ</h1>
      <nav>
        <ul>
          <li><a href="#">ホーム</a></li>
          <li><a href="#">ニュース</a></li>
          <li><a href="#">お問い合わせ</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <figure>
        <img src="example.jpg" alt="サンプル画像">
        <figcaption>サンプル画像のキャプション</figcaption>
      </figure>
    </main>
    <footer>
      <p>&copy; 2023 サンプルページ</p>
    </footer>
  </body>
</html>

<figure>要素の注意点

<figure>要素は、画像、イラスト、写真、図表などのメディア要素に関連する説明文やキャプションをまとめて表すために使用される。
<figure>要素には、<img>要素や<svg>要素を含めることができる。
<figcaption>要素は、<figure>要素内に1回だけ使用される必要がある。

HTML：<figcaption>

<figcaption>要素は、<figure>要素内で使用され、図表や画像などのキャプション（説明文）を表すために使用されます。

<!DOCTYPE html>
<html>
  <head>
    <title>サンプルページ</title>
  </head>
  <body>
    <header>
      <h1>サンプルページ</h1>
      <nav>
        <ul>
          <li><a href="#">ホーム</a></li>
          <li><a href="#">ニュース</a></li>
          <li><a href="#">お問い合わせ</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <figure>
        <img src="example.jpg" alt="サンプル画像">
        <figcaption>サンプル画像のキャプション</figcaption>
      </figure>
    </main>
    <footer>
      <p>&copy; 2023 サンプルページ</p>
    </footer>
  </body>
</html>

<figcaption>要素の注意点

<figcaption>要素は、<figure>要素内で使用され、図表や画像などのキャプション（説明文）を表すために使用される。
<figcaption>要素は、<figure>要素内で1回だけ使用される必要がある。
<figcaption>要素は、<figure>要素内のどこにでも配置することができますが、一般的には<img>要素の直後に配置される。

このページで学習したセマンティックHTMLは以下の通り。重要なポイントはそれぞれがどのような意味を持つのか？という点です。

タグ	説明
`<header>`	ページやセクションのヘッダーを示す。
`<nav>`	ナビゲーションリンクを含むセクションを示す。
`<main>`	ページの主要コンテンツ領域を示す。
`<article>`	独立して再利用可能なコンテンツ（ブログ記事、ニュース記事など）を示す。
`<section>`	関連するコンテンツのグループを示す。
`<aside>`	ページのメインコンテンツに関連するが、直接的には属さない補足情報を示す。
`<footer>`	ページやセクションのフッターを示す。
`<figure>`	図やイメージ、ビデオ、コードブロックなどの参照コンテンツを示す。
`<figcaption>`	`<figure>`内のコンテンツに対するキャプションや説明を示す。