セマンティックHTMLとは
セマンティックHTMLとは、要素の役割を表す意味のあるタグを使ってページを組み立てる考え方です。セマンティックは「意味の」という言葉で、見た目だけでなく中身の役割をタグで示すことを重視します。
たとえば、ページ上部のヘッダーはheader、ナビゲーションはnav、本文の独立したまとまりはarticle、補足情報はaside、ページ下部はfooterといった具合に、内容に合ったタグを選びます。
見た目はCSSで整えられますが、divやspanだけでは「これがヘッダーだ」という情報は伝わりません。意味のあるタグを使うことで、人だけでなく機械にも構造が伝わるようになります。
なぜ意味のあるタグが大切なのか
検索エンジンや支援技術（スクリーンリーダーなど）は、HTMLのタグを手がかりにページの構造を理解します。意味のあるタグで組まれていれば、どこが見出しで、どこが本文で、どこがナビゲーションなのかを正しく把握できます。
逆に、すべてをdivで作ると見た目は同じでも、機械にとっては「ただの箱の集まり」にしか見えません。これはSEOやアクセシビリティの面で不利になりがちです。
また、意味のあるタグは人間が読むコードとしても分かりやすく、後から修正する人にとっても構造が把握しやすくなります。保守性の観点でも有効です。
実務ではどこで関係する？
セマンティックHTMLは言葉の意味だけ覚えても、HTML共有の判断にはつながりません。実務では「表示に関係する話か」「検索に関係する話か」「アクセス制限に関係する話か」を分けて考えると整理しやすくなります。
セマンティックHTMLについて迷ったら、相手が安全に開けるか、検索に出してよいか、ブラウザや環境差で壊れないかを順番に確認します。用語理解は、その判断を早くするための道具として使います。手順が決まったら、HTML/ZIPをアップロードして共有URLを発行し、相手に確認してほしい観点と期限を添えて送ります。
- 表示の話: HTML/CSS/JS、パス、ブラウザ互換性を確認する
- 検索の話: noindex、canonical、sitemap、robots.txtの役割を分ける
- 制限の話: URL共有、パスワード、メール認証、会社ドメイン認証を混同しない
- 運用の話: 期限、差し替え、削除、共有メッセージまで決める
代表的なタグと役割
セマンティックなタグにはそれぞれ役割があります。代表的なものを押さえておくと、適切に使い分けられます。
以下に主なタグと役割をまとめます。すべてを完璧に覚える必要はなく、迷ったときに見返せるようにしておくと十分です。
- header：ページやセクションの先頭。タイトルやロゴを置く
- nav：主要なナビゲーションリンクのまとまり
- main：そのページの主要な内容。1ページに1つが基本
- article：単体で完結する記事や投稿などのまとまり
- section：見出しを持つ意味のある区切り
- aside：補足やサイドバーなど本筋から離れた情報
- footer：ページやセクションの末尾。著作権や連絡先など
見出しタグの正しい使い方
見出しのh1からh6も重要なセマンティック要素です。h1はそのページで最も大きな見出しとして使い、内容の階層に合わせてh2、h3と段階的に下げていきます。
見た目を大きくしたいだけの理由で見出しタグを選ぶのは避けましょう。文字サイズはCSSで調整できます。見出しタグは文書の論理的な階層を表すために使うのが正しい使い方です。
階層を飛ばさずに順序立てて使うと、支援技術の利用者が見出しを目次のようにたどれるようになり、ページ全体の見通しがよくなります。
divを意味のあるタグに置き換える手順
既存のページをセマンティックにしたいときは、いきなり全部を書き換えるのではなく、役割のはっきりした部分から順に置き換えていくと進めやすくなります。
次の順序で進めると、見た目を保ったまま少しずつ構造を整えられます。一度にすべてを直さなくても、置き換えた分だけ機械への伝わりやすさが向上します。
- まずページ全体を見渡し、ヘッダー・ナビ・本文・フッターなど役割ごとに区切る
- ページ上部のロゴやタイトル部分をheaderに置き換える
- 主要なリンクのまとまりをnavに置き換える
- そのページの中心となる内容をmainで囲む
- 記事や投稿など独立したまとまりをarticle、補足情報をasideにする
- 最後に著作権や連絡先などの末尾部分をfooterに置き換える
まとめと活用の場面
セマンティックHTMLは特別な技術ではなく、内容に合ったタグを選ぶという基本姿勢です。divの多用を見直し、意味のあるタグに置き換えるだけで、SEO・アクセシビリティ・保守性のすべてが底上げされます。
作ったHTMLが意図どおりに見えるかをチームで確認したいときは、ギガサイト便のように、HTMLをドロップして共有URLをすぐ発行できる仕組みが便利です。一時公開ページにはnoindexが付き検索結果には出ないので、レビュー段階の構造確認にも安心して使えます。
よくある質問
divを使ってはいけないのですか？
いいえ。divは意味を持たない汎用的な箱として今も有効です。ただしヘッダーやナビゲーションのように役割がはっきりした部分には、header・navなど意味のあるタグを使うほうが構造が伝わりやすくなります。
セマンティックHTMLはSEOに効果がありますか？
検索エンジンがページ構造を理解しやすくなるため、間接的に有利になりやすいです。ただし順位は内容の質など多くの要因で決まるため、セマンティックなタグだけで上位になるわけではありません。
h1は1ページに1つだけですか？
ページの主見出しとしてh1を1つにするのが分かりやすく無難です。文書の論理構造を表す目的で使い、見た目を大きくしたいだけの理由で増やすのは避けるとよいでしょう。
sectionとarticleの違いは何ですか？
articleは単体で完結して再利用できる内容（記事や投稿など）に使い、sectionは見出しを持つ意味のある区切りに使います。独立して成り立つかどうかが選ぶ目安になります。
実務ではどこで関係する？はHTML共有で必ず理解しておく必要がありますか？
細かな仕様を暗記する必要はありません。ただし、検索に出るか、閲覧者を制限できるか、表示が崩れないかに関わる用語は、共有前の判断材料として押さえておくと安全です。