ひとことで言うと
セマンティックHTMLとは、コンテンツの「意味」を表すタグを適切に使ったHTMLのことです。たとえば見出しには`<h1>〜<h6>`、ナビゲーションには`<nav>`、記事本文には`<article>`、補足情報には`<aside>`を使います。これらのタグはブラウザ・スクリーンリーダー・検索エンジンが構造を理解するための手がかりになります。
対比として「div地獄」と呼ばれる状態があります。すべてのレイアウトを`<div class="wrapper">`のようなdivだけで組んでいる場合、見た目は同じでも機械的な解析ができず、アクセシビリティとSEOの両面で評価が下がります。AIが生成したHTMLはこの状態に陥りやすいです。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
HTML共有で関係する場面
プレビューURLでHTMLを共有するとき、スクリーンリーダー利用者がページに到達した場合、`<nav>`や`<main>`タグが存在するとランドマークジャンプ機能でページ内を素早く移動できます。divだけのページでは全コンテンツを順番に聞かなければならず、目的の情報に到達するまでに非常な時間がかかります。
検索エンジンへのインデックスが将来的に必要になる場合も、セマンティックHTMLの有無は重要です。`<h1>`が複数あったり、見出し階層がh1→h4とジャンプしていたりすると、クローラーがページ構造を誤解し、検索表示の品質が下がります。
よくある誤解
「CSSクラス名に意味のある名前を付ければセマンティックHTMLと同等だ」は誤りです。`class="header"`を付けたdivは人間が読めるだけで、ブラウザやスクリーンリーダーはクラス名から構造を推測しません。`<header>`タグを使って初めてランドマークとして認識されます。
「AIはセマンティックHTMLを自動的に出力してくれる」と期待されがちですが、実際はプロンプトで明示的に指示しないと、divベースのHTML構造が出てくることが多いです。生成後に見出し・ナビゲーション・フッターのタグを確認する習慣が必要です。
安全に使うための注意点
共有前のセマンティクスチェックとして、Chrome拡張「Headings Map」を使うと見出し（h1〜h6）の階層構造がツリー表示されます。h1が複数あったり、h2の次にh4が来ていたりするような「飛び」が見つかれば修正が必要です。正しい階層は目次として成立する構造です。
ランドマークの確認にはaxe DevToolsの「Structure」タブが便利です。`<header>` `<nav>` `<main>` `<footer>`が適切に配置されているかが一覧で確認できます。もし`<main>`が存在しない場合は、ページのメインコンテンツを囲むタグを追加するだけで、スクリーンリーダーユーザーの体験が大幅に改善されます。
よくある質問
h1タグはページに1つだけであるべきですか？
HTML5の仕様上は複数のh1を許容していますが、アクセシビリティと実用面ではページに1つのh1（ページの主題）を推奨します。複数のh1があるとスクリーンリーダーユーザーが「どこから読み始めればよいか」迷います。SEOの観点でも主要なキーワードを1つのh1に集中させる方が評価されやすいです。
AI生成HTMLを受け取ったとき、セマンティクスを確認する最速の方法は何ですか？
Chrome DevToolsのElements→Accessibilityタブで「Accessibility Tree」を表示するか、Ctrl+Shift+Iで開発者ツールを起動して「landmark」でページ内検索するのが速いです。mainやnav、headerが存在しない場合はdivで代替されているサインです。
articleタグとsectionタグはどう使い分ければよいですか？
articleはそれ単独でコンテキストなしに意味が成立する独立したコンテンツ（ブログ記事・ニュース記事・製品カード）に使います。sectionはページ内のテーマでまとまった区切りに使い、通常は見出しを持ちます。articleの中にsectionを入れることは有効なパターンです。