女性向けエンジニアスクール
3秒でわかる
中身の役割が名前から分かるHTML要素のこと。見出しやナビゲーションを機械に伝え、読み上げソフトや検索エンジンの理解を助けます。
もう少し詳しく
どういうものか
セマンティックタグは、囲んだ内容がページの中でどんな役割を持つのかを名前で表すHTML要素です。header nav main article section aside footer といった構造を表すものと、h1 から h6、ul table time figure のように内容の性質を表すものがあります。
対になるのが div と span で、これらは意味を持たない入れ物です。見た目だけを整えたいときには適していますが、囲んだ中身が何なのかは何も伝えません。
なぜ必要か
HTMLを読むのは人間だけではありません。スクリーンリーダーは nav を見つけると「ナビゲーション」と伝え、利用者はそこを丸ごと読み飛ばせます。div class="nav" ではこの案内が出ず、メニューの項目を毎回全部聞かされます。検索エンジンも同じで、main の中の文章を本文として扱い、footer の定型文と区別します。ブラウザの読みやすさ表示機能も、本文の抽出にこの構造を使います。
見た目は同じでも、伝わる情報量が変わります。
具体例
<body>
<header>
<h1>ハレノヒ珈琲</h1>
<nav>
<ul>
<li><a href="/menu">メニュー</a></li>
<li><a href="/access">アクセス</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>新しい豆が入りました</h2>
<time datetime="2026-08-14">2026年8月14日</time>
<p>エチオピア産の浅煎りを取り扱い始めました。</p>
</article>
</main>
<footer><p>© 2026 ハレノヒ珈琲</p></footer>
</body>同じ内容をすべて div で書いても画面上は同じにできますが、上の形なら見出しの階層とページの領域が構造として残ります。
つまずきやすいところ
見た目を基準にタグを選ぶのが最も多い誤りです。文字を大きくしたいから h2 にする、太字にしたいから strong にする、という選び方をすると、見出しの階層が飛んで読み上げの目次が壊れます。大きさは CSS の役目で、タグは役割で選びます。
section と div の使い分けも迷いどころです。section は見出しを伴うまとまりに使うもので、見出しが付かない単なる囲みは div のままにします。レイアウト調整のためのラッパーを section にすると、読み上げ時に空のまとまりが増えます。
main は1ページに1つだけです。複数置くと構造が曖昧になります。
覚え方
タグを選ぶとき、画面を見ずに要素名だけを並べた状態を想像します。その並びだけでページの骨格が説明できるなら、適切に選べています。div が並ぶだけなら、意味が何も残っていない状態です。
