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

SEO 効果については誤解が広まっています。Google 検索セントラルの SEO スターターガイドは <article> や <section> といったセマンティック要素に一切触れておらず、見出しについては「Google 検索の観点では順序どおりに使われていなくても問題ない」と明記し、その話題を「注力しなくてよいこと」に分類しています。理由として、web 全体を見れば妥当な HTML になっていないページが多く、HTML 仕様に込められた意味論には頼りきれないという事情も挙げられています。したがって、セマンティック要素に置き換えれば順位が上がるという因果は公式には裏付けられていません。検索エンジンへ構造を明示したい場合の正攻法は構造化データ (JSON-LD) で、こちらはリッチリザルトの対象になり得ます。セマンティック HTML の投資対効果は、順位ではなくアクセシビリティと保守性の側にあると考えるのが実態に合います。

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

ただしランドマークとして扱われる条件には落とし穴があります。W3C の ARIA in HTML では、<header> が banner、<footer> が contentinfo になるのは <article>・<aside>・<main>・<nav>・<section> の子孫でないときだけと定められています。記事カードの中に置いた <footer> は generic (意味を持たない要素) として扱われ、ランドマークにはなりません。<section> の条件はさらに厳しく、アクセシブルな名前 (aria-label や aria-labelledby で与える見出し的な名前) が付いていなければ region ランドマークにならず、名前のない <section> をいくら並べてもランドマークの一覧には現れません。<div> を機械的に <section> へ置き換えれば支援技術に伝わる、というのがよくある誤りです。

見出し要素 (<h1> から <h6>) の適切な階層構造もセマンティック HTML の重要な要素です。見出しレベルを飛ばさず (h1 の次に h3 を使わない)、論理的な順序で使用することで、文書構造が明確になります。スクリーンリーダーのユーザーは見出し一覧から目的の箇所へジャンプするため、見出しの階層が乱れていると情報へのアクセスが困難になります。ここで根拠を取り違えないことが大切です。HTML 仕様にレベルを飛ばしてはならないという禁止規定はなく、前述のとおり Google も順序は問わないとしています。それでも階層を整える価値があるのは、見出しの入れ子がそのまま目次として支援技術に読み上げられ、読み手が全体像を把握する手がかりになるためです。

よくある誤解として、「セマンティック要素を使えば CSS のスタイリングが制限される」というものがあります。実際には、セマンティック要素は <div> と同様に CSS で自由にスタイリングでき、見た目の制約はありません。また、<section> と <article> の使い分けに迷うケースがありますが、判断基準は HTML 仕様が用意しています。<article> は「原則として単独で配布または再利用できる、完結した構成物」と定義されており、ブログ記事・ニュース記事・投稿・コメントのように切り出しても意味が通るものが該当します。<section> については「汎用のコンテナ要素ではない」と明言され、その内容が文書のアウトライン (目次) に項目として並ぶ場合にのみ適切だとされています。逆に、スタイリングやスクリプトの都合で囲みたいだけなら <div> を使うことが仕様上推奨されています。見出しを付けられないまとまりは <section> にしないと決めておくと、判断が安定します。

文字数カウントの観点では、セマンティック要素のタグ名は div (3 文字) より長くなります (article・section はいずれも 7 文字)。開始タグと終了タグの往復で数えると <div></div> が 11 文字、<article></article> が 19 文字で、1 要素あたり 8 文字の差です。要素が数十個あっても増えるのは数百文字程度で、意味を正確に伝えられる利点の方が上回ります。テキストコンテンツの文字数には影響しないため、ユーザーが目にする文字数も、文字数カウンターに貼り付けたときの結果も変わりません。