1. 👋 はじめに
前回はよく使うHTMLタグ（見出し・リスト・リンク・画像・フォーム）を学びました。
また最後に「ページ構造を作るタグ」として <header>・<main>・<footer> などを紹介しましたね。
今回はその 「なぜこのタグを使うのか」 を深掘りします！
同じ見た目でも、使うタグによって意味が全く違います。
セマンティックHTMLを理解することで、SEO・アクセシビリティ・保守性が一気に向上します。
この記事を読めば：
- ✅ セマンティックHTMLとは何かが理解できる
- ✅ 各セマンティックタグの正しい使い方がわかる
- ✅ アクセシビリティの基礎がわかる
- ✅ HTMLとSEOの関係がわかる
- ✅ よくあるNG例と改善例がわかる
2. 🧩 セマンティックHTMLとは？
一言で言うと
セマンティック（Semantic）とは「意味のある」という意味です。
セマンティックHTMLとは「意味のあるタグを使ってHTMLを書くこと」です。
divだらけのHTMLとセマンティックHTMLの違い
<!-- ❌ divだらけのHTML（意味がない） -->
<div class="header">
<div class="logo">MyBlog</div>
<div class="nav">
<div class="nav-item"><a href="/">ホーム</a></div>
<div class="nav-item"><a href="/blog">ブログ</a></div>
</div>
</div>
<div class="main">
<div class="article">
<div class="title">記事のタイトル</div>
<div class="content">記事の本文...</div>
</div>
</div>
<div class="footer">
<div class="copyright">© 2026 MyBlog</div>
</div>
<!-- ✅ セマンティックHTML（意味がある） -->
<header>
<p>MyBlog</p>
<nav>
<ul>
<li><a href="/">ホーム</a></li>
<li><a href="/blog">ブログ</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h1>記事のタイトル</h1>
<p>記事の本文...</p>
</article>
</main>
<footer>
<p>© 2026 MyBlog</p>
</footer>
なぜセマンティックHTMLが重要なのか？
| 理由 | 説明 |
|---|---|
| 🔍 SEO | 検索エンジンがページの構造・重要な部分を正確に理解できる |
| ♿ アクセシビリティ | スクリーンリーダーがページを正しく読み上げられる |
| 🛠️ 保守性 | コードを読んだだけでページの構造が把握できる |
| 🎨 CSS適用 | タグ名をセレクターとして使えて管理しやすい |
| 👥 チーム開発 | 誰が見ても「ここがヘッダー・ここがナビ」とわかる |
3. 🏗️ ページ構造を作るセマンティックタグ
ページ全体の構造イメージ
┌─────────────────────────────────────────┐
│ <header> │
│ ロゴ・ナビゲーション │
│ <nav>メニュー</nav> │
└─────────────────────────────────────────┘
┌─────────────────────────────────────────┐
│ <main> │
│ ┌────────────────────┐ ┌────────────┐ │
│ │ <article> │ │ <aside> │ │
│ │ <h1>タイトル</h1> │ │ サイドバー │ │
│ │ <section> │ │ 関連記事 │ │
│ │ セクション① │ │ │ │
│ │ </section> │ └────────────┘ │
│ │ <section> │ │
│ │ セクション② │ │
│ │ </section> │ │
│ └────────────────────┘ │
└─────────────────────────────────────────┘
┌─────────────────────────────────────────┐
│ <footer> │
│ コピーライト・リンク集 │
└─────────────────────────────────────────┘
<header>
ページまたはセクションのヘッダーを表します。
サイトのロゴ・ナビゲーション・タイトルなどを含めます。
<!-- ページ全体のヘッダー -->
<header>
<a href="/">
<img src="/logo.png" alt="MyBlog ロゴ" />
</a>
<nav>
<ul>
<li><a href="/">ホーム</a></li>
<li><a href="/blog">ブログ</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
</header>
<!-- article内のヘッダー（記事の見出し・著者情報など） -->
<article>
<header>
<h1>記事タイトル</h1>
<p>著者：田中太郎 | 2026年1月1日</p>
</header>
<p>記事の本文...</p>
</article>
💡
<header>はページに複数使えます！
<article>や<section>の中にも<header>を使えます。
「ページ全体のヘッダー」と「記事のヘッダー」は別物です。
<nav>
ナビゲーションメニューを表します。
サイト内の主要なリンク集に使います。
<!-- メインナビゲーション -->
<nav aria-label="メインメニュー">
<ul>
<li><a href="/">ホーム</a></li>
<li><a href="/blog">ブログ</a></li>
<li><a href="/contact">お問い合わせ</a></li>
</ul>
</nav>
<!-- パンくずリスト -->
<nav aria-label="パンくずリスト">
<ol> <!-- ulではなくol！順序が意味を持つため -->
<li><a href="/">ホーム</a></li>
<li><a href="/blog">ブログ</a></li>
<li>記事タイトル</li>
</ol>
</nav>
💡 パンくずリストに
<ol>を使う理由
「ホーム → ブログ → 記事」という順序が意味を持つため、
番号なし（<ul>）ではなく順序付き（<ol>）がセマンティック的に正しい選択です。
見た目の番号はCSSで非表示にして「>」などのセパレーターを追加するのがベストプラクティスです。/* 番号を消して横並びにする */ nav[aria-label="パンくずリスト"] ol { list-style: none; display: flex; gap: 4px; } /* CSSで「>」を追加 */ nav[aria-label="パンくずリスト"] li + li::before { content: ">"; } /* 表示結果：ホーム > ブログ > 記事タイトル */
⚠️ このサンプルのパンくずリストは「見た目の例」です
上記のHTMLは静的（固定）なコードのため、
別のページに遷移しても内容は変わりません。
実務では サーバーサイド（PHP・Python等）やReact・Next.jsなどで
現在のURLをもとに動的に生成する のが一般的です。
⚠️ すべてのリンクを
<nav>で囲む必要はありません！
フッターの利用規約リンクや、記事内のリンクは<nav>で囲まなくてOKです。
サイトの主要なナビゲーションにだけ使いましょう。
<main>
ページのメインコンテンツを表します。
1つのページに 1つだけ 使えます。
<body>
<header>ヘッダー</header>
<main>
<!-- ここがページの主要なコンテンツ -->
<h1>ページタイトル</h1>
<p>メインの内容...</p>
</main>
<footer>フッター</footer>
</body>
💡
<main>はスクリーンリーダーの「メインコンテンツへジャンプ」機能に使われます。
視覚障害のあるユーザーがナビゲーションをスキップして
直接メインコンテンツに移動できるようになります。
<article>
それ単体で独立した意味を持つコンテンツを表します。
「このコンテンツだけを切り取って別のサイトに載せても意味が通る」なら<article>です。
<!-- ブログ記事 -->
<article>
<h1>TypeScriptを始めよう</h1>
<p>投稿日：2026年1月1日</p>
<p>TypeScriptは...</p>
</article>
<!-- ニュース記事 -->
<article>
<h2>新製品が発売されました</h2>
<p>本日、新製品の...</p>
</article>
<!-- コメント（独立したコンテンツとして） -->
<article>
<h3>田中太郎のコメント</h3>
<p>とても参考になりました！</p>
</article>
<section>
テーマでまとまったコンテンツのグループを表します。
見出し（<h2>など）とセットで使うのが基本です。
<article>
<h1>TypeScriptを始めよう</h1>
<section>
<h2>TypeScriptとは</h2>
<p>TypeScriptはJavaScriptに型を...</p>
</section>
<section>
<h2>インストール方法</h2>
<p>まずnpmを使って...</p>
</section>
<section>
<h2>まとめ</h2>
<p>TypeScriptを使うことで...</p>
</section>
</article>
<article> と <section> の使い分け
| タグ | 使う場面 | 判断基準 |
|---|---|---|
<article> |
ブログ記事・ニュース・コメント | 「単体で意味が通るか？」YES→article |
<section> |
記事内の章・ページ内のブロック | 「テーマでまとまっているか？」YES→section |
<div> |
意味のないグループ化・CSSのための囲み | 上記どちらでもない場合 |
迷ったときの判断フロー：
「このコンテンツ、別のサイトに切り取って貼っても意味が通る？」
YES → <article>
NO ↓
「テーマでまとまっていて、見出しがある？」
YES → <section>
NO → <div>
<aside>
メインコンテンツに関連した補足情報を表します。
サイドバー・関連記事・広告・補足説明などに使います。
<main>
<article>
<h1>記事タイトル</h1>
<p>記事の本文...</p>
</article>
<aside>
<h2>関連記事</h2>
<ul>
<li><a href="/blog/1">関連記事①</a></li>
<li><a href="/blog/2">関連記事②</a></li>
</ul>
</aside>
</main>
<footer>
ページまたはセクションのフッターを表します。
コピーライト・リンク集・連絡先などを含めます。
<!-- ページ全体のフッター -->
<footer>
<nav aria-label="フッターメニュー">
<ul>
<li><a href="/terms">利用規約</a></li>
<li><a href="/privacy">プライバシーポリシー</a></li>
<li><a href="/contact">お問い合わせ</a></li>
</ul>
</nav>
<p>© 2026 MyBlog. All rights reserved.</p>
</footer>
<div> と <span>
<div>と<span>は「意味を持たない汎用タグ」です。
セマンティックなタグが当てはまらないときの「最後の手段」として使います。
<!-- <div>：ブロック要素の汎用グループ化 -->
<div class="card">
<h2>カードタイトル</h2>
<p>カードの内容</p>
</div>
<!-- <span>：インライン要素の汎用グループ化 -->
<p>価格：<span class="price">1,000円</span>（税込）</p>
💡
<div>を使う前に一度考えてみましょう！
「<div>でいいか」ではなく
「セマンティックなタグが当てはまらないか？」を先に考える習慣を持ちましょう。
4. ♿ アクセシビリティの基礎
アクセシビリティとは？
アクセシビリティとは「すべての人がWebサイトを利用できること」です。
視覚障害・聴覚障害・運動障害など、さまざまな状況の人がWebを使えるように配慮することです。
なぜアクセシビリティが重要なのか？
🌍 世界の状況：
世界人口の約15%（約10億人）が何らかの障害を持っていると言われています
📱 様々な使われ方：
スクリーンリーダー（音声読み上げ）での操作
キーボードだけでの操作
高コントラストモードでの表示
音声操作（Siriなど）
💼 ビジネス的な観点：
アクセシビリティ対応は多くの国・地域で法律で義務化されつつある
対応することで利用者層が広がる
キーボード操作への対応
<!-- ✅ tabindex：キーボードのTabキーでフォーカスできるようにする -->
<!-- フォーカス順序を指定（0=自然な順序・正の数=優先度） -->
<div tabindex="0">フォーカスできるdiv</div>
<!-- tabindex="-1"：Tabでは来ないが、JSでフォーカスできる -->
<div tabindex="-1" id="modal">モーダル</div>
/* ✅ フォーカス時のスタイルを消してはいけない！ */
/* ❌ これは絶対にNG：キーボードユーザーが現在地を見失う */
:focus { outline: none; }
/* ✅ カスタムスタイルを当てるならこう */
:focus-visible { outline: 3px solid blue; }
WAI-ARIA の基礎
WAI-ARIA（Web Accessibility Initiative - Accessible Rich Internet Applications）とは
「HTMLのセマンティクスを補強するための属性」です。
よく使うARIA属性
<!-- aria-label：要素の説明ラベル（テキストがない場合） -->
<button aria-label="メニューを開く">
<img src="hamburger.svg" alt="" /> <!-- altは空でOK -->
</button>
<!-- aria-labelledby：別の要素をラベルとして参照 -->
<h2 id="section-title">お問い合わせ</h2>
<form aria-labelledby="section-title">
<!-- このフォームは「お問い合わせ」フォームだとスクリーンリーダーに伝わる -->
</form>
<!-- aria-hidden：スクリーンリーダーから隠す -->
<span aria-hidden="true">★★★★☆</span> <!-- 装飾的な星のアイコン -->
<span class="sr-only">評価：4/5</span> <!-- 代わりにこちらを読み上げる -->
<!-- aria-expanded：開閉状態を伝える -->
<button aria-expanded="false" aria-controls="menu">
メニュー
</button>
<ul id="menu" hidden>
<li><a href="/">ホーム</a></li>
</ul>
<!-- aria-current：現在のページを示す -->
<nav>
<ul>
<li><a href="/" aria-current="page">ホーム</a></li> <!-- 現在のページ -->
<li><a href="/blog">ブログ</a></li>
</ul>
</nav>
<!-- role：要素の役割を指定（セマンティックタグがない場合の補完） -->
<div role="alert">エラーが発生しました</div>
<div role="button" tabindex="0">クリック</div>
スクリーンリーダー専用テキスト
/* 視覚的には非表示だがスクリーンリーダーには読まれる */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
<button>
<img src="close.svg" alt="" aria-hidden="true" />
<span class="sr-only">モーダルを閉じる</span>
</button>
5. 🔍 HTMLとSEOの関係
SEOに影響するHTMLの要素
| HTML要素 | SEOへの影響 | ポイント |
|---|---|---|
<title> |
⭐⭐⭐ 高い | 検索結果のタイトルに直接使われる |
<meta description> |
⭐⭐ 中（間接的） | クリック率に影響・順位には直接影響しない |
<h1> |
⭐⭐⭐ 高い | ページの主要テーマを伝える |
<h2>〜<h6>
|
⭐⭐ 中 | コンテンツの構造を伝える |
<a> のテキスト |
⭐⭐ 中 | リンク先のページのテーマを伝える |
alt 属性 |
⭐⭐ 中 | 画像の内容を検索エンジンに伝える |
| セマンティックタグ | ⭐ 間接的 | コンテンツの構造理解を助ける |
canonical |
⭐⭐⭐ 高い | 重複コンテンツ問題を防ぐ |
構造化データ（Schema.org）
構造化データとは「ページの内容を検索エンジンがより詳しく理解できるようにする追加情報」です。
検索結果にリッチスニペット（星評価・価格・FAQなど）を表示させられます。
<!-- JSON-LD形式の構造化データ（推奨） -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "TypeScriptを始めよう",
"author": {
"@type": "Person",
"name": "田中太郎"
},
"datePublished": "2026-01-01",
"image": "https://example.com/images/typescript.jpg"
}
</script>
6. ❌ よくあるNG例と改善例
NG例① 見出しを見た目だけで使う
<!-- ❌ NG：見出しを大きくしたいだけで使っている -->
<h1>会社概要</h1>
<h1>代表者メッセージ</h1> <!-- h1が2つある！ -->
<h3>所在地</h3> <!-- h2を飛ばしてh3 -->
<!-- ✅ 改善：正しい階層構造と見た目はCSSで調整 -->
<h1>会社概要</h1>
<h2>代表者メッセージ</h2>
<h2>所在地</h2>
💡 HTML5仕様とSEO実務のスタンダードについて
HTML5の仕様上は<article>や<section>ごとに<h1>を配置することも可能です。
しかし検索エンジンやスクリーンリーダーの混乱を防ぐため、「1ページにつき<h1>は最も重要なタイトル1つだけ」 に統一するのが、現代のSEO・Web制作のベストプラクティスです。
NG例② クリックできるdivを使う
<!-- ❌ NG：divにonclickを付けてボタンのように使う -->
<div onclick="doSomething()" class="button">クリック</div>
<!-- 問題点：
- キーボードでフォーカスできない
- スクリーンリーダーが「ボタン」と読み上げない
- Enterキーで実行できない
-->
<!-- ✅ 改善：<button>タグを使う -->
<button type="button" onclick="doSomething()">クリック</button>
⚠️ インタラクティブ要素の入れ子はNG！
<!-- ❌ <a> の中に <button> を入れる → 仕様違反 --> <a href="/page"> <button type="button">クリック</button> </a> <!-- ❌ <a> の中にさらに <a> を入れる → 仕様違反 --> <a href="/page"> テキスト <a href="/other">別リンク</a> <!-- NG！ --> </a>
<a>の中に<button>を入れたり、<a>の中にさらに別の<a>を入れる構造はHTMLの仕様上禁止されています。
クリック時の挙動が崩れたり、ブラウザによって予期しない動作をする原因になります。
NG例③ 装飾目的でテーブルを使う
<!-- ❌ NG：レイアウトのためにtableを使う（古い手法） -->
<table>
<tr>
<td>左側のコンテンツ</td>
<td>右側のコンテンツ</td>
</tr>
</table>
<!-- ✅ 改善：CSSのFlexboxやGridを使う -->
<div class="layout">
<div class="left">左側のコンテンツ</div>
<div class="right">右側のコンテンツ</div>
</div>
NG例④ altを省略する・無意味にする
<!-- ❌ NG -->
<img src="product.jpg" /> <!-- altなし -->
<img src="product.jpg" alt="画像" /> <!-- 意味のないalt -->
<img src="product.jpg" alt="product.jpg" /> <!-- ファイル名をaltに -->
<!-- ✅ 改善 -->
<img src="product.jpg" alt="赤いワンピース・Mサイズ・税込5,500円" />
NG例⑤ インラインスタイルを多用する
<!-- ❌ NG：style属性を直接書く -->
<p style="color: red; font-size: 24px; font-weight: bold;">
重要なお知らせ
</p>
<!-- ✅ 改善：CSSクラスで管理する -->
<p class="important-notice">重要なお知らせ</p>
7. 📋 セマンティックHTMLの完全な例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>TypeScriptを始めよう | TechBlog</title>
<meta name="description" content="TypeScriptの基礎から実践まで、初心者向けに丁寧に解説します。" />
<link rel="canonical" href="https://example.com/blog/typescript-intro" />
<link rel="stylesheet" href="/styles/main.css" />
</head>
<body>
<!-- サイト全体のヘッダー -->
<header>
<a href="/" aria-label="TechBlog トップへ">
<img src="/logo.png" alt="TechBlog" />
</a>
<nav aria-label="メインメニュー">
<ul>
<li><a href="/">ホーム</a></li>
<li><a href="/blog" aria-current="page">ブログ</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
</header>
<!-- メインコンテンツ -->
<main>
<!-- パンくずリスト -->
<nav aria-label="パンくずリスト">
<ol>
<li><a href="/">ホーム</a></li>
<li><a href="/blog">ブログ</a></li>
<li>TypeScriptを始めよう</li>
</ol>
</nav>
<!-- 記事本体 -->
<article>
<header>
<h1>TypeScriptを始めよう</h1>
<p>
<time datetime="2026-01-01">2026年1月1日</time> ・
著者：<a href="/author/taro">田中太郎</a>
</p>
</header>
<section>
<h2>TypeScriptとは</h2>
<p>TypeScriptはMicrosoftが開発した...</p>
</section>
<section>
<h2>インストール方法</h2>
<p>以下のコマンドを実行します。</p>
<pre><code>npm install -g typescript</code></pre>
</section>
<section>
<h2>まとめ</h2>
<p>TypeScriptを使うことで...</p>
</section>
<footer>
<p>タグ：
<a href="/tag/typescript">TypeScript</a>・
<a href="/tag/javascript">JavaScript</a>
</p>
</footer>
</article>
<!-- サイドバー -->
<aside>
<section>
<h2>関連記事</h2>
<ul>
<li><a href="/blog/javascript-intro">JavaScriptを始めよう</a></li>
<li><a href="/blog/react-intro">Reactを始めよう</a></li>
</ul>
</section>
</aside>
</main>
<!-- サイト全体のフッター -->
<footer>
<nav aria-label="フッターメニュー">
<ul>
<li><a href="/terms">利用規約</a></li>
<li><a href="/privacy">プライバシーポリシー</a></li>
</ul>
</nav>
<p><small>© 2026 TechBlog. All rights reserved.</small></p>
</footer>
</body>
</html>
8. 🎯 シリーズ総まとめ
3回にわたって学んだ内容を振り返りましょう。
| 回 | テーマ | 重要ポイント |
|---|---|---|
| 第一回 | 基本構造・headタグ | DOCTYPE・charset・viewport・OGP・canonical |
| 第二回 | よく使うタグ | 見出し・リスト・リンク・画像・フォーム・バリデーション |
| 第三回 | セマンティック・アクセシビリティ・SEO | 意味のあるタグ・ARIA・SEOとHTMLの関係 |
良いHTMLを書くためのチェックリスト
✅ <!DOCTYPE html> を書いているか
✅ <html lang="ja"> で言語を指定しているか
✅ <meta charset="UTF-8"> を head の最初に書いているか
✅ <meta name="viewport"> を書いているか
✅ <title> はページごとに異なる内容を書いているか
✅ <h1> はページに1つだけか
✅ 見出しの階層を飛ばしていないか
✅ <img> に alt 属性を書いているか
✅ <label> と <input> が正しく紐づいているか
✅ target="_blank" に rel="noopener noreferrer" を付けているか
✅ <div> の代わりにセマンティックタグを使えていないか確認したか
✅ クリックできる要素は <button> か <a> を使っているか
✅ <a> の中に <button> や別の <a> を入れていないか
✅ canonical タグを設定しているか
✅ OGPを設定しているか
✅ コピーライト・免責事項に <small> を使っているか
💡
<small>タグはHTML5で意味が変わりました！
かつての<small>は「文字を小さくする」だけのタグでしたが、
HTML5以降は 「免責事項・著作権・法的表記（細則）」 という
セマンティックな意味を持つタグに生まれ変わっています。
コピーライト（© 2026 TechBlog.）や注記・免責事項には積極的に使いましょう。
「動けばいいHTML」から「意味のあるHTML」へ。
HTMLは「見た目を作るもの」ではなく「文書の意味と構造を定義するもの」です。
正しいHTMLを書くことが、SEO・アクセシビリティ・保守性のすべてに繋がります💪
💬 質問や感想があれば、コメント欄でお気軽にどうぞ!
👍 役に立ったら、いいね&ストックをお願いします!
🎓 ここまで読んでくださって、本当にありがとうございました!
🔗 シリーズ記事
- 【第一回】HTMLの基本構造・headタグを完全解説
- 【第二回】よく使うタグを完全解説
- 【第三回】セマンティックHTML・アクセシビリティ・SEO（この記事）