セマンティック HTML は「正しく書く」ためではなく、機械にも人にも構造を伝えるための語彙です。 この記事では、現場でよく使うタグの判断基準を、短くまとめ直します。
結論
divで済むものはdivでよい。意味があるところだけセマンティックタグを使う- ページ内で「役割が決まっている領域」には専用タグを当てる
- 見出しの階層 (h1 → h2 → h3) は崩さない
前提
- 対象は HTML5 以降。古い
<center>などには触れない - スクリーンリーダー・検索エンジン・将来の自分の3者に届けることを意識する
用途ごとの使い分け
header / footer
- ページ全体のヘッダー/フッターだけでなく、
article内のヘッダー/フッターにも使える - 「導入と本文」「本文と末尾の補足」を分けるのに有効
nav
- 主要なナビゲーションだけに付ける。サイト内全部のリンク集ではない
- パンくずや目次にも使ってよい
article / section
articleは単独で意味が完結するまとまり (記事本文、商品カード)sectionは見出しを持つ意味のまとまり。h2 とセットで考えるのが分かりやすい
まとめ
- 「迷ったら div、意味が決まったらセマンティック」で十分
- 見出しと領域タグを揃えるだけで、AI とアクセシビリティ両面に効いてくる