はじめに
前回の記事ではWeb制作者のためのHTMLフォームの使い方としてinput・select・textarea・チェックボックス・ラジオボタンの使い方からアクセシビリティ対応まで解説しました。今回はHTMLのセマンティックタグ完全ガイドを解説します。「divとspanだけでサイトを作っている」「headerやmainを使っているけど正しいかわからない」という方は多いのではないでしょうか。セマンティックタグを正しく使うことでSEO・アクセシビリティ・コードの可読性が大きく向上します。各タグの役割と使い分けを丁寧に解説します。
1. セマンティックタグとは
1.1 セマンティックタグの意味
セマンティック（semantic）= 意味のある
HTMLタグには2種類ある：
非セマンティックタグ：
<div> → 「何か入れる箱」という意味しかない
<span> → 「何かをまとめる」という意味しかない
セマンティックタグ：
<header> → 「ヘッダー（頭部）」という意味を持つ
<nav> → 「ナビゲーション」という意味を持つ
<main> → 「メインコンテンツ」という意味を持つ
<article> → 「記事」という意味を持つ
<section> → 「セクション（区画）」という意味を持つ
<aside> → 「補足情報」という意味を持つ
<footer> → 「フッター（末尾）」という意味を持つ
→ タグ自体が「このコンテンツは何か」を伝えられる
1.2 なぜセマンティックタグを使うのか
セマンティックタグを使う3つの理由：
① SEOへの影響
→ 検索エンジンがページの構造を理解しやすくなる
→ 「どこが重要なコンテンツか」を伝えられる
→ 適切な構造はランキングに良い影響を与える
② アクセシビリティへの影響
→ スクリーンリーダーがページを読み上げる際
「ナビゲーションです」「メインコンテンツです」
と案内できる
→ キーボード操作でランドマーク間を移動できる
→ 視覚障害のある方が使いやすくなる
③ コードの可読性
→ <div class="header"> より <header> の方が
一目でわかる
→ チームで開発するときにも意図が伝わりやすい
→ 後から見返したときに理解しやすい
❌ divだけで作った場合：
<div class="header">
<div class="nav">
<div class="nav-item">...</div>
</div>
</div>
<div class="main">
<div class="article">...</div>
</div>
✅ セマンティックタグを使った場合：
<header>
<nav>
<ul>...</ul>
</nav>
</header>
<main>
<article>...</article>
</main>
2. ページ全体の構造
2.1 基本的なページ構造
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ページタイトル</title>
</head>
<body>
<!-- サイト全体のヘッダー -->
<header>
<nav><!-- グローバルナビゲーション --></nav>
</header>
<!-- メインコンテンツ（1ページに1つだけ） -->
<main>
<!-- ページ固有のコンテンツ -->
<article>
<h1>記事タイトル</h1>
<section>
<h2>セクション見出し</h2>
<p>本文...</p>
</section>
</article>
<!-- 補足情報 -->
<aside>
<h2>関連記事</h2>
</aside>
</main>
<!-- サイト全体のフッター -->
<footer>
<nav><!-- フッターナビゲーション --></nav>
<p>Copyright...</p>
</footer>
</body>
</html>
3. 各タグの役割と使い方
3.1 headerタグ
<!--
<header>：ヘッダー・導入部分
使う場面：
① サイト全体のヘッダー（ロゴ・グローバルナビ）
② article・section の導入部分
1ページに複数使ってもOK
⚠️ <head> タグとは別物（混同しない）
<head> → HTMLの設定（非表示）
<header> → ページの上部コンテンツ（表示される）
-->
<!-- ① サイト全体のヘッダー -->
<header>
<a href="/" class="logo">
<img src="/images/logo.svg" alt="サイト名">
</a>
<nav aria-label="グローバルナビゲーション">
<ul>
<li><a href="/">ホーム</a></li>
<li><a href="/about/">会社概要</a></li>
<li><a href="/service/">サービス</a></li>
<li><a href="/contact/">お問い合わせ</a></li>
</ul>
</nav>
</header>
<!-- ② article の導入部分 -->
<article>
<header>
<h1>記事タイトル</h1>
<p>
<time datetime="2024-03-15">2024年3月15日</time>
<span>カテゴリー名</span>
</p>
</header>
<p>記事本文...</p>
</article>
3.2 navタグ
<!--
<nav>：ナビゲーションリンクのまとめ
使う場面：
→ サイトの主要なナビゲーション
→ パンくずリスト
→ ページ内目次
→ フッターナビゲーション
⚠️ すべてのリンクグループに使わない
→ フッターのSNSリンクや
記事内の参考リンクには使わない
→ 「主要なナビゲーション」にのみ使う
aria-label で複数のnavを区別する
-->
<!-- グローバルナビゲーション -->
<nav aria-label="グローバルナビゲーション">
<ul>
<li><a href="/">ホーム</a></li>
<li><a href="/service/">サービス</a></li>
<li><a href="/blog/">ブログ</a></li>
</ul>
</nav>
<!-- パンくずリスト -->
<nav aria-label="パンくずリスト">
<ol>
<li><a href="/">ホーム</a></li>
<li><a href="/blog/">ブログ</a></li>
<li aria-current="page">記事タイトル</li>
<!--
aria-current="page" →
現在のページであることをスクリーンリーダーに伝える
-->
</ol>
</nav>
<!-- ページ内目次 -->
<nav aria-label="目次">
<ol>
<li><a href="#section1">セマンティックタグとは</a></li>
<li><a href="#section2">headerタグの使い方</a></li>
<li><a href="#section3">mainタグの使い方</a></li>
</ol>
</nav>
<!-- フッターナビゲーション -->
<footer>
<nav aria-label="フッターナビゲーション">
<ul>
<li><a href="/privacy/">プライバシーポリシー</a></li>
<li><a href="/terms/">利用規約</a></li>
</ul>
</nav>
</footer>
3.3 mainタグ
<!--
<main>：ページのメインコンテンツ
重要なルール：
→ 1ページに1つだけ使う
→ サイト共通の要素（ヘッダー・フッター・サイドバー）
は含めない
→ ページ固有のコンテンツだけを入れる
スクリーンリーダーは <main> を検索して
メインコンテンツにジャンプできる
→ 「メインコンテンツへスキップ」機能に使われる
-->
<body>
<header>...</header>
<!-- 「メインコンテンツへスキップ」リンク（アクセシビリティ） -->
<a href="#main-content" class="skip-link">
メインコンテンツへスキップ
</a>
<main id="main-content">
<!--
このページ固有のコンテンツ
→ トップページ：ヒーロー・特徴・実績など
→ ブログ記事：記事本文
→ 会社概要：会社情報
-->
</main>
<footer>...</footer>
</body>
<style>
/* スキップリンクのスタイル（通常は非表示） */
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: #1A5FC0;
color: white;
padding: 8px;
text-decoration: none;
z-index: 100;
}
/* フォーカスされたときだけ表示 */
.skip-link:focus {
top: 0;
}
</style>
3.4 articleタグ
<!--
<article>：それ単体で完結するコンテンツ
使う場面：
→ ブログ記事・ニュース記事
→ SNSの投稿
→ 商品カード
→ レビュー
→ コメント
判断基準：
「そのコンテンツだけを切り取って
別のサイトに貼っても意味が通じるか？」
→ 通じる → article
→ 通じない → section か div
article は入れ子にできる
（記事の中にコメントのarticleを入れるなど）
-->
<!-- ブログ記事 -->
<article>
<header>
<h1>記事タイトル</h1>
<time datetime="2024-03-15">2024年3月15日</time>
</header>
<p>記事の本文...</p>
<footer>
<p>著者：山田太郎</p>
<ul>
<li>タグ：<a href="/tag/html/">HTML</a></li>
<li>タグ：<a href="/tag/css/">CSS</a></li>
</ul>
</footer>
<!-- コメント（articleの中のarticle） -->
<section aria-label="コメント">
<h2>コメント</h2>
<article>
<header>
<strong>田中花子</strong>
<time datetime="2024-03-16">2024年3月16日</time>
</header>
<p>とても参考になりました！</p>
</article>
</section>
</article>
<!-- 商品カード（article の使い方） -->
<ul class="product-list">
<li>
<article class="product-card">
<img src="product.jpg" alt="商品名">
<h2><a href="/product/1/">商品名</a></h2>
<p>¥12,800</p>
<p>商品の説明文...</p>
</article>
</li>
</ul>
3.5 sectionタグ
<!--
<section>：テーマでまとめたコンテンツのグループ
article との違い：
→ article：単体で完結する（切り取っても意味が通じる）
→ section：ページの一部として意味を持つ
使う場面：
→ ページのセクション（機能紹介・実績・お客様の声など）
→ 記事内のセクション
→ タブのコンテンツ
⚠️ 注意点：
→ section には必ず見出し（h2〜h6）を含める
→ 見出しのない section は div を使う
→ スタイリングのためだけには使わない
-->
<!-- トップページのセクション構成 -->
<main>
<!-- ヒーローセクション -->
<section aria-labelledby="hero-heading">
<h2 id="hero-heading" class="visually-hidden">トップ</h2>
<p>キャッチコピー</p>
<a href="/contact/">お問い合わせ</a>
</section>
<!-- 特徴セクション -->
<section aria-labelledby="features-heading">
<h2 id="features-heading">3つの特徴</h2>
<ul>
<li>特徴①</li>
<li>特徴②</li>
<li>特徴③</li>
</ul>
</section>
<!-- 実績セクション -->
<section aria-labelledby="works-heading">
<h2 id="works-heading">制作実績</h2>
<!-- 実績一覧 -->
</section>
<!-- お客様の声セクション -->
<section aria-labelledby="voice-heading">
<h2 id="voice-heading">お客様の声</h2>
<!-- 声の一覧 -->
</section>
</main>
<!--
aria-labelledby → 見出しのidを指定することで
スクリーンリーダーが「〇〇セクション」と読み上げる
-->
3.6 asideタグ
<!--
<aside>：メインコンテンツに関連する補足情報
使う場面：
→ サイドバー
→ 関連記事
→ 広告
→ 注釈・補足説明
⚠️ メインコンテンツと直接関係のある情報は
aside ではなく本文中に書く
-->
<!-- ブログのサイドバー -->
<aside aria-label="サイドバー">
<!-- カテゴリー一覧 -->
<section>
<h2>カテゴリー</h2>
<ul>
<li><a href="/category/html/">HTML（15）</a></li>
<li><a href="/category/css/">CSS（12）</a></li>
</ul>
</section>
<!-- 最新記事 -->
<section>
<h2>最新記事</h2>
<ul>
<li><a href="/blog/1/">記事タイトル1</a></li>
<li><a href="/blog/2/">記事タイトル2</a></li>
</ul>
</section>
<!-- 広告 -->
<section aria-label="広告">
<!-- 広告コード -->
</section>
</aside>
<!-- 記事内の補足情報 -->
<article>
<p>本文...</p>
<!-- 本文に関連する補足 -->
<aside>
<h3>💡 補足</h3>
<p>ここに補足情報を書く</p>
</aside>
<p>続きの本文...</p>
</article>
3.7 footerタグ
<!--
<footer>：フッター・末尾情報
使う場面：
① サイト全体のフッター
② article・section の末尾情報
1ページに複数使ってもOK
-->
<!-- サイト全体のフッター -->
<footer>
<div class="footer-inner">
<!-- 会社情報 -->
<section aria-label="会社情報">
<h2>会社名</h2>
<address>
<!-- address タグ：連絡先情報に使う -->
〒000-0000<br>
東京都○○区○○1-2-3<br>
<a href="tel:03-0000-0000">03-0000-0000</a><br>
<a href="mailto:info@example.com">info@example.com</a>
</address>
</section>
<!-- フッターナビ -->
<nav aria-label="フッターナビゲーション">
<ul>
<li><a href="/privacy/">プライバシーポリシー</a></li>
<li><a href="/terms/">利用規約</a></li>
<li><a href="/sitemap/">サイトマップ</a></li>
</ul>
</nav>
<!-- コピーライト -->
<p>
<small>
© 2024 会社名. All Rights Reserved.
</small>
</p>
</div>
</footer>
<!-- article の末尾情報 -->
<article>
<p>記事本文...</p>
<footer>
<p>最終更新：<time datetime="2024-03-15">2024年3月15日</time></p>
<p>著者：<a href="/author/yamada/">山田太郎</a></p>
</footer>
</article>
4. その他の重要なセマンティックタグ
4.1 見出しタグの正しい使い方
<!--
h1〜h6：見出しの階層構造
重要なルール：
→ h1 は1ページに1つだけ（ページの主題）
→ 階層を飛ばさない（h1→h3はNG）
→ スタイルのために見出しを選ばない
（大きくしたいからh2を使うのはNG）
✅ 正しい階層構造
-->
<main>
<h1>CSSの基本</h1> <!-- ページの主題 -->
<section>
<h2>セレクターの種類</h2> <!-- 大セクション -->
<section>
<h3>要素セレクター</h3> <!-- 中セクション -->
<p>説明...</p>
</section>
<section>
<h3>クラスセレクター</h3>
<h4>基本の書き方</h4> <!-- 小セクション -->
<p>説明...</p>
</section>
</section>
<section>
<h2>プロパティの基本</h2>
</section>
</main>
<!--
❌ 悪い例：階層を飛ばしている
-->
<h1>タイトル</h1>
<h3>小見出し</h3> <!-- h2を飛ばしてh3はNG -->
4.2 timeタグ
<!--
<time>：日付・時刻を表す
→ datetime属性に機械が読める形式で日時を書く
→ 表示テキストは人が読みやすい形式でOK
-->
<time datetime="2024-03-15">2024年3月15日</time>
<time datetime="2024-03-15T10:30">2024年3月15日 10時30分</time>
<time datetime="10:30">午前10時30分</time>
<time datetime="P1Y2M">1年2ヶ月</time>
4.3 addressタグ・figureタグ
<!--
<address>：連絡先情報
→ メールアドレス・電話番号・住所など
→ 記事の著者情報にも使える
-->
<address>
〒100-0001 東京都千代田区○○1-1<br>
<a href="tel:03-0000-0000">03-0000-0000</a>
</address>
<!--
<figure>と<figcaption>：
画像・コード・グラフなどとキャプションのセット
-->
<figure>
<img src="chart.png" alt="2024年のWebサイト制作件数グラフ">
<figcaption>
図1：2024年のWebサイト制作件数（当社調べ）
</figcaption>
</figure>
<!-- コードブロックにも使える -->
<figure>
<figcaption>CSSのFlexboxの基本</figcaption>
<pre><code>
.container {
display: flex;
justify-content: center;
}
</code></pre>
</figure>
5. スクリーンリーダーへの影響
5.1 ランドマークロール
<!--
セマンティックタグは自動的に
「ランドマークロール」を持つ：
<header> → role="banner"（サイトレベルの場合）
<nav> → role="navigation"
<main> → role="main"
<article> → role="article"
<section> → role="region"（aria-labelがある場合）
<aside> → role="complementary"
<footer> → role="contentinfo"（サイトレベルの場合）
スクリーンリーダーのユーザーは
ランドマーク間をキーボードで移動できる：
→ 「ナビゲーションへ移動」
→ 「メインコンテンツへ移動」
→ 「補足情報へ移動」
-->
<!-- aria-label で複数の同じタグを区別する -->
<header aria-label="サイトヘッダー">...</header>
<main>
<article>
<header aria-label="記事ヘッダー">...</header>
</article>
</main>
<footer aria-label="サイトフッター">...</footer>
5.2 よくある間違いと正しい書き方
<!--
❌ よくある間違い①：divだらけ
-->
<div class="header">
<div class="logo">...</div>
<div class="nav">
<div class="nav-list">...</div>
</div>
</div>
<div class="main">
<div class="content">...</div>
<div class="sidebar">...</div>
</div>
<div class="footer">...</div>
<!--
✅ 正しい書き方
-->
<header>
<a href="/" class="logo">...</a>
<nav aria-label="グローバルナビゲーション">
<ul>...</ul>
</nav>
</header>
<main>
<article>...</article>
<aside>...</aside>
</main>
<footer>...</footer>
<!--
❌ よくある間違い②：見出しのないsection
-->
<section class="hero">
<p>キャッチコピー</p>
</section>
<!--
✅ visually-hiddenで見出しを追加する
-->
<section aria-labelledby="hero-heading">
<h2 id="hero-heading" class="visually-hidden">トップ</h2>
<p>キャッチコピー</p>
</section>
<!--
❌ よくある間違い③：mainが複数ある
-->
<main>ヘッダーコンテンツ</main>
<main>メインコンテンツ</main> <!-- NG -->
<!--
✅ mainは1ページに1つだけ
-->
<header>ヘッダーコンテンツ</header>
<main>メインコンテンツ</main>
6. 実践：ブログサイトの構造例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>記事タイトル | ブログ名</title>
</head>
<body>
<!-- スキップリンク -->
<a href="#main" class="skip-link">メインコンテンツへスキップ</a>
<!-- サイトヘッダー -->
<header aria-label="サイトヘッダー">
<a href="/" class="logo">
<img src="/logo.svg" alt="ブログ名">
</a>
<nav aria-label="グローバルナビゲーション">
<ul>
<li><a href="/">ホーム</a></li>
<li><a href="/blog/">ブログ</a></li>
<li><a href="/about/">プロフィール</a></li>
</ul>
</nav>
</header>
<!-- メインコンテンツ -->
<main id="main">
<!-- パンくずリスト -->
<nav aria-label="パンくずリスト">
<ol>
<li><a href="/">ホーム</a></li>
<li><a href="/blog/">ブログ</a></li>
<li aria-current="page">記事タイトル</li>
</ol>
</nav>
<!-- 記事 -->
<article aria-labelledby="article-title">
<header>
<h1 id="article-title">HTMLのセマンティックタグ完全ガイド</h1>
<p>
<time datetime="2024-03-15">2024年3月15日</time>
<a href="/category/html/">HTML</a>
</p>
</header>
<!-- 目次 -->
<nav aria-label="目次">
<h2>目次</h2>
<ol>
<li><a href="#intro">はじめに</a></li>
<li><a href="#header">headerタグ</a></li>
</ol>
</nav>
<!-- 本文 -->
<section id="intro" aria-labelledby="intro-heading">
<h2 id="intro-heading">はじめに</h2>
<p>本文...</p>
</section>
<section id="header" aria-labelledby="header-heading">
<h2 id="header-heading">headerタグの使い方</h2>
<p>本文...</p>
<figure>
<img src="header-example.png" alt="headerタグのコード例">
<figcaption>headerタグのコード例</figcaption>
</figure>
</section>
<footer>
<p>著者：<a href="/author/">山田太郎</a></p>
<p>最終更新：<time datetime="2024-03-20">2024年3月20日</time></p>
</footer>
</article>
<!-- サイドバー -->
<aside aria-label="サイドバー">
<section>
<h2>関連記事</h2>
<ul>
<li><a href="/blog/form/">HTMLフォームの使い方</a></li>
<li><a href="/blog/css-grid/">CSS Gridレイアウト</a></li>
</ul>
</section>
<section>
<h2>カテゴリー</h2>
<ul>
<li><a href="/category/html/">HTML（15）</a></li>
<li><a href="/category/css/">CSS（12）</a></li>
</ul>
</section>
</aside>
</main>
<!-- サイトフッター -->
<footer aria-label="サイトフッター">
<nav aria-label="フッターナビゲーション">
<ul>
<li><a href="/privacy/">プライバシーポリシー</a></li>
<li><a href="/sitemap/">サイトマップ</a></li>
</ul>
</nav>
<p><small>© 2024 ブログ名</small></p>
</footer>
</body>
</html>
7. 実践チェックリスト
✓ h1は1ページに1つだけ使っているか・見出しの階層を飛ばしていないか
✓ mainタグは1ページに1つだけ使っているか
✓ navタグにaria-labelで「グローバルナビゲーション」「フッターナビゲーション」などを区別しているか
✓ sectionタグには必ず見出し（h2〜h6）か aria-labelledby を付けているか
✓ チェックボックスやラジオボタンのグループにfieldsetとlegendを使っているか
✓ 日付にtimeタグとdatetime属性を使っているか
✓ 連絡先情報にaddressタグを使っているか
✓ 画像とキャプションのセットにfigureとfigcaptionを使っているか
✓ スキップリンク（メインコンテンツへスキップ）を実装しているか
まとめ
今回はHTMLのセマンティックタグ完全ガイドとしてheader・main・article・sectionの使い分け・nav・aside・footerの役割・スクリーンリーダーへの影響とアクセシビリティ対応を解説しました。ポイントをまとめると：
- セマンティックタグを使う理由はSEO・アクセシビリティ・コードの可読性の3つで「divだけで作る」より検索エンジンにもスクリーンリーダーにも優しいHTMLになる
- headerとfooterはサイト全体とarticle・section内の両方で使える・mainは1ページに1つだけというルールを守る
- navは主要なナビゲーションにだけ使い・aria-labelで「グローバルナビゲーション」「フッターナビゲーション」と区別する
- articleは「切り取っても意味が通じる単体のコンテンツ」・sectionは「ページの一部として意味を持つグループ」と使い分ける
- sectionには必ず見出しを含める・見出しがない場合はdivを使うかaria-labelledbyで代替する
- asideはサイドバー・関連記事・補足情報など「メインコンテンツを補う情報」に使う
- スクリーンリーダーはランドマークタグ間をキーボードで移動できる・aria-labelで複数の同じタグを区別することが重要
- h1は1ページに1つ・見出しの階層は飛ばさない・スタイルのために見出しを選ばないというルールを守る
次の記事では、HTMLでパンくずリストを実装する方法｜構造化データ対応をお届けします。お楽しみに！
コメント