セマンティックHTML（Semantic HTML）

セマンティックHTML（Semantic HTML）とは、見た目ではなく「その部分が何であるか」という意味に沿ってHTMLのタグを選ぶ書き方のことです。セマンティックは「意味の」という意味の語で、機械にも中身が伝わる作り方を指します。

現実世界に例えると、セマンティックHTMLは中身を書いたラベルを貼った収納箱のようなものです。見た目が同じ箱でも、「冬服」「書類」と書いてあれば、開けなくても中が分かります。探す側にとっての違いは決定的です。

意味を持つ主なタグ

何が問題だったのか

かつては、あらゆる部分をdivという汎用のタグで囲む書き方が主流でした。見た目は思いどおりに作れますが、どこが見出しでどこが本文なのか、人間以外には判別できません。意味を持つタグを使う書き方は、この状態を改める流れから広まりました。

読み上げソフトのために

もっとも実利のある理由がこれです。目の不自由な方が使う読み上げソフトは、タグの意味を手がかりに「見出しだけを拾って移動する」といった操作を可能にします。divだけで作られたページでは、この移動ができません。

検索にも効く

機械が読むという点では検索エンジンも同じです。どこが本文でどこが広告やメニューかを判別しやすくなり、内容が正しく評価されやすくなります。順位を保証するものではありませんが、伝わりやすい構造にしておく意味は十分にあります。

見出しは順番どおりに

基本にして、崩れやすい点です。h1から始めて、h2、h3と順に下げていきます。文字を大きくしたいという理由で番号を飛ばしてはいけません。大きさはCSSで整えるもので、番号は文書の構造を表すためのものです。

見た目は変わらない

誤解されやすい点です。divをsectionやarticleに置き換えても、画面上の見え方はほとんど変わりません。効果が見えにくいため後回しにされがちですが、機械から見た読みやすさは大きく違います。

やりすぎない

逆の失敗もあります。意味のないところまで無理に意味のあるタグを当てはめると、かえって構造が分かりにくくなります。単に見た目を整えるためのまとまりであれば、divのままで構いません。迷ったらdivを使うほうが安全です。

確かめる方法

自分の書いたページは点検できます。ブラウザの開発者向け機能で構造を確認するほか、読み上げソフトから見た構造を表示してくれる道具もあります。見出しだけを抜き出して、それだけで内容の流れが分かるかを見るのが簡単な目安です。

あわせて知っておきたい用語

• HTML：
  Webページの中身を記述するための言語です。
• CSS：
  Webページの見た目を指定するための言語です。
• アクセシビリティ：
  誰にとっても使いやすい状態にすることです。
• SEO：
  検索結果で上位に出るよう工夫することです。