セマンティックなHTMLで差がつく！SEOにも効くマークアップの基本
セマンティックHTMLとは？なぜ重要なのか？
セマンティックHTMLとは、「意味のあるHTML要素を使って、Webページの構造を分かりやすく記述する」という考え方です。HTMLには、見た目だけを整えるための汎用的なタグ（例：<div> や <span>）だけでなく、「これは見出し」「これは記事の本文」「これはナビゲーション」といった意味を持つタグが多数用意されています。
セマンティックなマークアップを使うことによって、以下のようなメリットがあります：
- 検索エンジン（SEO）に強くなる：Googleなどの検索エンジンはページの構造を理解しやすくなり、コンテンツの評価が正確になります。
- アクセシビリティの向上：スクリーンリーダーなど支援技術にとって情報が伝わりやすくなります。
- コードの保守性が上がる：開発者がHTMLの構造を見ただけで、どの部分が何の役割を果たしているかすぐ分かります。
よく使われるセマンティックHTML要素とその役割
セマンティック要素は、以下の4つのカテゴリーに分類することができます。
1. 文書構造（Document Structure）
文書全体の論理的な構造を定義するためのタグです。従来はすべてを <div> で囲むことが一般的でしたが、HTML Living Standardでは以下のような意味のあるタグが用意されています。
- <header>：ページやセクションのヘッダー部分。ロゴや見出し、ナビゲーションなどを含む。
- <footer>：ページやセクションのフッター部分。著作権表示、連絡先、ナビゲーションの補足などに使用。
- <main>：そのページ独自のメインコンテンツ（全ページ共通のヘッダーやナビゲーションを除く）。
- <nav>：ナビゲーションリンク群。ページ内移動やサイト全体のメニューを定義。
- <section>：章やトピックなど、意味のある内容のまとまり。
- <aside>：補足的な情報（例：広告、関連記事、用語解説など）。
- <article>：独立して再利用可能なコンテンツ（例：ブログ記事、ニュース記事など）。
2. テキストの意味づけ（Textual Meaning）
見た目だけでなく、テキストの意味や重要性を明示するためのタグです。
- <p>：段落（paragraph）を示す基本タグ。テキストの区切りを明確にし、読みやすくする。
- <em>：強調。音声読み上げ時に強調される。
- <strong>：より強い重要性を示す。通常は太字で表示。
- <mark>：文中の重要な語句やキーワードをハイライト。
- <cite>：引用元を明示。
- <blockquote> / <q>：外部からの引用。<blockquote> は長文、<q> は短文に適する。
- <time>：日付や時刻を指定。検索エンジンや機械が理解しやすくなる。
- <h1>〜<h6>：見出しの階層構造を示す。<h1> が最上位、数字が大きくなるほど優先度は下がる。
3. メディアタイプ（Media Type）
音声、映像、画像といったメディアの種類を明示するタグです。
- <audio>：音声コンテンツを埋め込む。複数の音声ソースを指定可能。
- <video>：動画コンテンツを埋め込む。再生コントロールや字幕も設定できる。
- <picture>：レスポンシブ対応画像。画面サイズや解像度に応じて最適な画像を表示。
4. 関連性を示すタグ（Correlation Tags）
複数の要素の関係性やグループ化を明確にするタグです。
- <ul>：順不同リスト。要素の順番に意味がない場合に使用。
- <ol>：順序付きリスト。手順やランキングなど、順番が重要な場合に使用。
- <figure> + <figcaption>：図や画像、コードなどの内容と、その説明文をグループ化。
- <address>：連絡先情報を提供。記事内では筆者の連絡先、フッターではサイト全体の連絡先を示すことが多い。
セマンティックHTMLの書き方：具体的な例
まずは「構造」を意識することが重要です
HTMLを書く際は、デザインや見た目よりも先に、各部分が「見出し」「本文」「補足情報」などどのような役割を果たすかをはっきりさせることが大切です。これにより、文書全体の意味が明確になり、後々の修正や保守もしやすくなります。
適切なタグを使い分けましょう
意味に応じて正しいタグを使うことが、セマンティックHTMLの基本です。
- 見出しには <h1>〜<h6>
- リストには <ul> や <ol>
- 強調したい部分には <strong> や <em>
このように、タグの選択は単なる見た目ではなく、「意味」に基づいて行うのがポイントです。
実例：セマンティックでないHTMLと、セマンティックなHTMLの比較
✖セマンティックでないHTMLの例
このコードでは、すべてが <div> タグで囲まれており、意味のないクラス名だけに頼って構造を伝えている状態です。人間には理解できても、検索エンジンや支援技術には意図が伝わりにくいのが欠点です。
✔セマンティックなHTMLの例
このように書き換えることで、ページ全体の構造や各要素の意味が明確になり、読み手にも機械にも伝わりやすいHTMLになります。結果として、SEOやアクセシビリティも自然と向上します。
このようなセマンティックなコーディングを習慣づけることで、より質の高いWebサイト制作が実現できます 。
MARUTTOでは、セマンティックなHTML構造を重視したコーディングを通じて、SEOに強く、ユーザーにも優しいWebサイト制作を支援しています。構造化されたマークアップにより、より高品質で保守性の高いサイト構築が可能です。ご興味のある方は、どうぞお気軽にご相談ください。
