セマンティックなHTMLとは？ SEOとアクセシビリティを高める正しい使い方

セマンティックHTMLとは？

セマンティック（semantic）は「意味的な」という意味です。
セマンティックHTMLとは、HTML要素に本来の意味を持たせてコンテンツをマークアップすることを指します。HTML5でセマンティック要素が正式に導入されたのは2014年頃（W3C勧告が発行されたタイミング）で、そこから使われるようになりました。

例えば以下のようなタグがあります。

• <header>：ページやセクションの冒頭部分
• <nav>：主要なナビゲーション
• <main>：ページのメインコンテンツ
• <article>：独立した記事やコンテンツ
• <section>：トピックごとのまとまり
• <aside>：補足情報やサイドバー
• <footer>：ページやセクションの締めくくり
• <div>：特に意味を持たない汎用コンテナ（必要に応じて使う）

意味を持つタグを適切に使うことで、SEOやアクセシビリティの向上が期待できます。

SEOにおけるセマンティックHTMLの重要性

Googleの公式ドキュメントでは、「HTML要素は、その目的にかなった用途で使用することが推奨されています」と明言されています。（Google for Developers）

さらに、「Google 検索がページを正しく認識しなければ、検索結果に表示されず、サイトへのトラフィックは生まれません」とも記載されております。（Google for Developers）

そのため、クローラーにページを正確に理解してもらうために、正しいマークアップをすること（セマンティックHTML）がSEO対策をする上での土台となります。

ユーザーエクスペリエンス（UX）とアクセシビリティへの効果

検索エンジンだけでなく、セマンティックHTMLはユーザーにもメリットがあります。

• スクリーンリーダーの読み上げ精度向上
  タグの意味が明確だと、音声読み上げで正しい順序や役割を伝えられます。
• 情報構造の把握が容易
  <nav>や<aside>で情報を整理すると、目的の情報にアクセスしやすくなります。
• 保守性と拡張性の向上
  コードの可読性が高まり、開発者同士の共有もスムーズになります。

スクリーンリーダーの読み上げ精度向上

スクリーンリーダーは、単に文字を読むだけでなく、ユーザーにHTMLの要素名や属性を手がかりにコンテンツの「役割」を伝えます。

例えば：

• <nav> → 「ナビゲーション」と読み上げ、ユーザーはリンク集だと理解できる
• <header> → 「ヘッダー」として、ページやセクションの冒頭と認識
• <main> → 「メインコンテンツ」として主要部分に直接移動できる
• <aside> → 「補足情報」として、本筋とは別の情報だと伝えられる

また、スクリーンリーダーは特定の要素（見出し、リンク、フォームなど）に素早く移動する機能を持っています。セマンティックにマークアップされていると、耳で構造を理解しやすくなります。

保守性と拡張性の向上

セマンティックHTMLを使うと、ページの中でどこが「主要コンテンツ」なのか、どこが「ナビゲーション」なのかがタグの意味で分かります。

そのため、後から読む人（開発者、デザイナー、SEO担当）がコードを見ただけで構造を把握でき、SEO改善やサイト変更時の修正箇所の発見や修正内容の洗い出しが容易になり、作業の効率アップにつながります。

例）セマンティックでない書き方

<div class="header">
  <div class="menu">...</div>
</div>
<div class="content">...</div>
<div class="footer">...</div>

全てdivタグでマークアップしており、意味の違いがクローラーやユーザーに伝わらない。

例）セマンティックな書き方

<header>
  <nav>...</nav>
</header>
<main>...</main>
<footer>...</footer>

タグが使い分けされており、どのタグに何についての内容が書かれているか伝わる。どういったHTML構造になっているかがわかりやすい。

SEOに強いセマンティックHTMLで押さえておきたいコツ

セマンティックにマークアップするコツとして、以下の点が挙げられます。

• 意味に合ったタグを使う
• 見出しタグ（h1〜h6）を正しく階層化する
• <div>や<span>の乱用を避ける
• alt属性やARIA属性で補足情報を付ける

それぞれ、簡単に解説します。

意味に合ったタグを使う

ここまで記載してきた内容と重なりますが、まずはページの内容を正確に理解してもらえるように意味のあったタグを使うことです。文章には<p>、ナビゲーションには<nav>など、HTMLタグ本来の役割を意識することが大事です。

意識していくと、ここは<section>か<article>かといったように迷うことが出てくると思います。その場合は、タグの意味を調べながら判断していきましょう。

見出しタグ（H1~H6）を正しく階層化する

HTML5の仕様としては、以下のような使い方をしても問題はありません。

<article>
  <h1>記事タイトル</h1>
  <p>記事本文...</p>
</article>

<aside>
  <h1>関連記事</h1>
  <p>リンク集...</p>
</aside>

あくまで仕様的には問題ないということで、SEOに良いかとは別の話です。<h1>の意味としては「ページのメインの見出し」であるため、1つのページに複数メインの見出しがあることはほぼないと思います。そのため<h1>については、基本的には「ページあたり1つ」かと思います。

<h2>〜<h6>については、そこから階層によって使い分けていきます。

<main>
  <h1>セマンティックHTMLの基本</h1>

  <section>
    <h2>見出しタグの役割</h2>
    <article>
      <h3>H1はページの主題</h3>
      <p>ページ全体でH1は基本1つ。HTML5ではセクションごとにH1を使えるが、SEO的には慎重に。</p>
    </article>

    <article>
      <h3>H2〜H6で構造化</h3>
      <p>見出しは飛ばさず、階層順に使うことで検索エンジンが構造を理解しやすくなる。</p>
    </article>
  </section>

  <aside>
    <h2>関連記事</h2>
    <ul>
      <li><a href="#">HTMLタグの基本</a></li>
      <li><a href="#">SEOに強い記事構造</a></li>
    </ul>
  </aside>
</main>

このように階層で使い分けることによって、わかりやすい構成となります。

<div>や<span>の乱用を避ける

<div>や<span>といったタグは特に意味のない要素です。使う場面としては、スタイルを適用させる時のみです。この「のみ」が重要です。大量の<div>や<span>を使うと、HTML構造が不明確になり、検索エンジンが文脈を把握しづらくなりますし、コードを見たときに「この<div>の終了はどこ？」といったように可読性が著しく失われます。

まずは<div>と<span>を使わずにマークアップし、使わないとデザインが作れないという場面になって初めて使うというスタンスがいいと個人的に考えています。（display: grid; を適用させるときなど）

<!-- 良い例 -->
<nav>
  <ul>
    <li><a href="/">ホーム</a></li>
    <li><a href="/about">当サイトについて</a></li>
  </ul>
</nav>

<!-- 悪い例 -->
<div>
  <div><a href="/">ホーム</a></div>
  <div><a href="/about">当サイトについて</a></div>
</div>

alt属性やARIA属性で補足情報を付ける

alt属性は<img>タグの属性で、画像が表示できない場合や、スクリーンリーダー使用時に代替の説明文を表示するためのものです。検索エンジンはaltの内容も参照し、画像の内容を理解するため、SEO対策として忘れずにつけた方がいいです。ただし、装飾目的の画像は空白でも問題はないです。（例：背景画像など）

ARIA属性は要素に役割・状態・名前を付与し、支援技術（スクリーンリーダーなど）に正確な情報を伝えるものです。HTMLタグだけでは意味が曖昧な場合に補足として利用します。「どういったボタンなのか」、「読み上げる必要のないものなのか」、「アコーディオンメニューが開いているのか」など、読み手に補足情報を伝えアクセシビリティを向上させます。

<!-- 画像にalt -->
<img src="recipe.jpg" alt="トマトとバジルの冷製パスタ">

<!-- ボタンにARIA -->
<button aria-label="メニューを開く">
  <svg>…</svg>
</button>

まとめ

セマンティックHTMLは、

• SEOの土台を作り
• アクセシビリティを向上させ
• コードの読みやすさを高める

という3つの効果を持ちます。

すぐに劇的な結果が出るわけではありませんが、積み重ねることで検索順位とユーザー体験の両方を着実に改善します。意味のあるHTMLを心がけていきましょう！