セマンティック HTML

セマンティック HTML とは

セマンティック HTML は、<div> や <span> の代わりに、コンテンツの意味を表す HTML 要素 (<header>, <nav>, <main>, <article>) を使ってマークアップする手法である。スクリーンリーダー、検索エンジン、開発者がコンテンツの構造を理解しやすくなる。

非セマンティック vs セマンティック

<!-- ❌ 非セマンティック: div だらけで構造が不明 -->
<div class="header">
  <div class="nav">...</div>
</div>
<div class="content">
  <div class="article">...</div>
  <div class="sidebar">...</div>
</div>
<div class="footer">...</div>

<!-- ✅ セマンティック: 要素名から構造が分かる -->
<header>
  <nav aria-label="メインナビゲーション">...</nav>
</header>
<main>
  <article>...</article>
  <aside>...</aside>
</main>
<footer>...</footer>

主要なセマンティック要素

要素	意味	用途
<header>	ヘッダー	ページやセクションの冒頭
<nav>	ナビゲーション	メニュー、パンくずリスト
<main>	メインコンテンツ	ページに 1 つだけ
<article>	独立したコンテンツ	ブログ記事、ニュース
<section>	テーマ別のセクション	章、タブパネル
<aside>	補足情報	サイドバー、関連リンク
<footer>	フッター	著作権、連絡先
<figure>	図表	画像 + キャプション
<time>	日時	<time datetime="2026-04-01">

見出しの階層

<!-- ✅ 論理的な階層 -->
<h1>サイトタイトル</h1>
  <h2>セクション 1</h2>
    <h3>サブセクション 1.1</h3>
  <h2>セクション 2</h2>

<!-- ❌ 階層が飛んでいる -->
<h1>タイトル</h1>
<h3>いきなり h3</h3>  <!-- h2 を飛ばしている -->

SEO への効果

要素	SEO 効果
<h1>	ページの主題を検索エンジンに伝える
<article>	独立したコンテンツとして認識
<nav>	サイト構造の理解を助ける
<time>	日時情報を構造化データとして認識

アクセシビリティへの効果

スクリーンリーダーはセマンティック要素をランドマークとして認識し、ユーザーがページ内を効率的にナビゲートできる。

スクリーンリーダーの読み上げ:
  「ナビゲーション: メインナビゲーション」
  「メインコンテンツ」
  「記事: TypeScript 入門」
  「補足情報」
  「フッター」

さらに掘り下げるなら関連書籍が参考になる。