セマンティック HTML とは、コンテンツの意味や構造を明確に伝える HTML 要素を適切に使用することです。<div> や <span> は汎用的なコンテナ要素であり、それ自体には意味がありません。一方、<header>、<nav>、<main>、<article>、<section>、<aside>、<footer> などのセマンティック要素は、囲まれたコンテンツの役割を明示します。HTML5 で導入されたこれらの要素により、マークアップだけでページの構造を正確に表現できるようになりました。

セマンティック HTML は SEO に大きく貢献します。検索エンジンのクローラーはページの構造を解析する際、セマンティック要素を手がかりにコンテンツの重要度や関係性を判断します。たとえば <article> 内のテキストはメインコンテンツとして認識され、<aside> 内のテキストは補足情報として扱われます。適切なマークアップにより、検索エンジンがページの主題を正確に理解し、検索結果での表示順位が向上する可能性があります。HTML5 セマンティクスの書籍で詳しく学べます。

アクセシビリティの面では、スクリーンリーダーがセマンティック要素をランドマーク (目印) として認識し、ユーザーがページ内を効率的に移動できるようになります。たとえば VoiceOver では「ナビゲーション」「メインコンテンツ」「フッター」といったランドマーク一覧を表示し、目的のセクションへ直接ジャンプできます。<div> だけで構成されたページでは、この機能が利用できません。

見出し要素 (<h1> から <h6>) の適切な階層構造もセマンティック HTML の重要な要素です。見出しレベルを飛ばさず (h1 の次に h3 を使わない)、論理的な順序で使用することで、文書構造が明確になります。スクリーンリーダーのユーザーは見出し一覧から目的の箇所へジャンプするため、見出しの階層が乱れていると情報へのアクセスが困難になります。

よくある誤解として、「セマンティック要素を使えば CSS のスタイリングが制限される」というものがあります。実際には、セマンティック要素は <div> と同様に CSS で自由にスタイリングでき、見た目の制約はありません。また、<section> と <article> の使い分けに迷うケースがありますが、<article> は独立して意味をなすコンテンツ (ブログ記事、ニュース記事など) に、<section> はテーマ的にまとまったセクションに使用するのが適切です。

文字数カウントの観点では、セマンティック要素のタグ名は <div> (3 文字) より長い場合がありますが (<article> は 7 文字、<section> は 7 文字)、HTML ソースの文字数が増えてもコンテンツの意味を正確に伝えるメリットが上回ります。テキストコンテンツの文字数には影響しないため、ユーザーが目にする文字数は変わりません。Web 標準設計の書籍も参考になります。