Day 8: セマンティックHTML
今日学ぶこと
- セマンティックHTMLとは何か
- ページ構造のセマンティック要素
- コンテンツのセマンティック要素
- アクセシビリティとの関係
セマンティックHTMLとは
「セマンティック」とは「意味のある」という意味です。セマンティックHTMLとは、コンテンツの意味や役割を適切に表現するHTML要素を使うことです。
flowchart LR
subgraph NonSemantic["❌ 非セマンティック"]
D1["<div class='header'>"]
D2["<div class='nav'>"]
D3["<div class='content'>"]
end
subgraph Semantic["✅ セマンティック"]
S1["<header>"]
S2["<nav>"]
S3["<main>"]
end
style NonSemantic fill:#ef4444,color:#fff
style Semantic fill:#22c55e,color:#fff
なぜセマンティックHTMLが重要なのか
| 恩恵 | 説明 |
|---|---|
| アクセシビリティ | スクリーンリーダーがページ構造を理解できる |
| SEO | 検索エンジンがコンテンツの重要度を判断できる |
| メンテナンス性 | コードを読む人が構造を理解しやすい |
| 一貫性 | 標準的な構造で統一感が生まれる |
ページ構造のセマンティック要素
典型的なページ構成
flowchart TB
subgraph Page["Webページの構造"]
Header["<header><br>ロゴ、サイト名"]
Nav["<nav><br>ナビゲーション"]
Main["<main><br>メインコンテンツ"]
Article["<article><br>記事"]
Aside["<aside><br>サイドバー"]
Footer["<footer><br>フッター"]
end
Header --> Nav
Nav --> Main
Main --> Article
Main --> Aside
Article --> Footer
style Header fill:#3b82f6,color:#fff
style Nav fill:#8b5cf6,color:#fff
style Main fill:#22c55e,color:#fff
style Article fill:#f59e0b,color:#fff
style Aside fill:#f59e0b,color:#fff
style Footer fill:#ef4444,color:#fff
<header>
ページまたはセクションのヘッダーです。
<header>
<h1>サイト名</h1>
<nav>
<a href="/">ホーム</a>
<a href="/about">概要</a>
<a href="/contact">お問い合わせ</a>
</nav>
</header>
<nav>
ナビゲーションリンクのグループです。
<nav aria-label="メインナビゲーション">
<ul>
<li><a href="/">ホーム</a></li>
<li><a href="/blog">ブログ</a></li>
<li><a href="/about">概要</a></li>
</ul>
</nav>
ポイント: ページに複数の
<nav>がある場合、aria-labelで区別します。
<main>
ページのメインコンテンツです。1ページに1つだけ使用します。
<main>
<h1>ブログ記事一覧</h1>
<!-- メインコンテンツ -->
</main>
<footer>
ページまたはセクションのフッターです。
<footer>
<p>© 2026 サイト名. All rights reserved.</p>
<nav aria-label="フッターナビゲーション">
<a href="/privacy">プライバシーポリシー</a>
<a href="/terms">利用規約</a>
</nav>
</footer>
コンテンツのセマンティック要素
<article>
独立して完結するコンテンツに使います。
<article>
<header>
<h2>HTMLセマンティクスの重要性</h2>
<p><time datetime="2026-01-29">2026年1月29日</time></p>
</header>
<p>セマンティックHTMLを使うことで...</p>
<footer>
<p>著者: 田中太郎</p>
</footer>
</article>
判断基準: そのコンテンツだけを切り出して他のページに貼っても意味が通じるなら、
<article>が適切です。
<section>
テーマを持つコンテンツのグループです。
<section>
<h2>最新ニュース</h2>
<article>...</article>
<article>...</article>
</section>
<section>
<h2>イベント情報</h2>
<p>来月のイベント一覧...</p>
</section>
<aside>
メインコンテンツに関連するが、独立したコンテンツです。
<aside>
<h3>関連記事</h3>
<ul>
<li><a href="/post1">CSSの基本</a></li>
<li><a href="/post2">JavaScriptの基本</a></li>
</ul>
</aside>
article / section / div の使い分け
flowchart TB
Q1{"独立して<br>意味が通じる？"}
Q2{"テーマがある？"}
Q3["<div><br>汎用コンテナ"]
A["<article>"]
S["<section>"]
Q1 -->|"はい"| A
Q1 -->|"いいえ"| Q2
Q2 -->|"はい"| S
Q2 -->|"いいえ"| Q3
style A fill:#22c55e,color:#fff
style S fill:#3b82f6,color:#fff
style Q3 fill:#f59e0b,color:#fff
時間と日付
<time> 要素
<p>投稿日: <time datetime="2026-01-29">2026年1月29日</time></p>
<p>会議: <time datetime="2026-02-01T14:00">2月1日 14:00</time></p>
<p>期間: <time datetime="PT2H30M">2時間30分</time></p>
| datetime形式 | 例 | 意味 |
|---|---|---|
YYYY-MM-DD |
2026-01-29 |
日付 |
HH:MM |
14:00 |
時刻 |
YYYY-MM-DDTHH:MM |
2026-01-29T14:00 |
日時 |
PTXHXM |
PT2H30M |
期間 |
<details> と <summary>
折りたたみ可能なコンテンツを作成できます。JavaScriptなしで実現できます。
<details>
<summary>よくある質問: HTMLとは？</summary>
<p>HTML（HyperText Markup Language）は、
Webページの構造を定義するマークアップ言語です。</p>
</details>
<details open>
<summary>最初から開いた状態</summary>
<p>open属性をつけると、初期状態で開きます。</p>
</details>
<dialog> 要素
モーダルダイアログを作成するための要素です。
<dialog id="myDialog">
<h2>確認</h2>
<p>本当に削除しますか？</p>
<form method="dialog">
<button value="cancel">キャンセル</button>
<button value="confirm">削除する</button>
</form>
</dialog>
アクセシビリティの基本
ARIA属性
ARIA（Accessible Rich Internet Applications）属性で、要素の役割を補足できます。
<nav aria-label="メインメニュー">...</nav>
<button aria-expanded="false">メニューを開く</button>
<div role="alert">エラーが発生しました。</div>
| 属性 | 用途 |
|---|---|
aria-label |
要素の説明テキスト |
aria-expanded |
展開状態 |
aria-hidden |
支援技術から隠す |
role |
要素の役割を指定 |
原則: まず適切なHTML要素を使い、それだけでは不十分な場合にのみARIA属性を追加します（「No ARIA is better than bad ARIA」）。
実践: ブログサイトのトップページ
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Tech Blog</title>
</head>
<body>
<header>
<h1>My Tech Blog</h1>
<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>
<section>
<h2>最新記事</h2>
<article>
<header>
<h3><a href="/blog/semantic-html">セマンティックHTMLの重要性</a></h3>
<p><time datetime="2026-01-29">2026年1月29日</time></p>
</header>
<p>セマンティックHTMLを使うことで、アクセシビリティとSEOの両方が向上します...</p>
<footer>
<p>タグ: HTML, アクセシビリティ</p>
</footer>
</article>
<article>
<header>
<h3><a href="/blog/css-grid">CSS Gridで作るレイアウト</a></h3>
<p><time datetime="2026-01-28">2026年1月28日</time></p>
</header>
<p>CSS Gridを使えば、複雑なレイアウトも簡単に実現できます...</p>
<footer>
<p>タグ: CSS, レイアウト</p>
</footer>
</article>
</section>
<aside>
<h2>プロフィール</h2>
<p>Web技術について学んだことを共有しています。</p>
<h2>カテゴリ</h2>
<ul>
<li><a href="/tag/html">HTML</a></li>
<li><a href="/tag/css">CSS</a></li>
<li><a href="/tag/javascript">JavaScript</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2026 My Tech Blog. All rights reserved.</p>
<nav aria-label="フッターナビゲーション">
<a href="/privacy">プライバシーポリシー</a> |
<a href="/terms">利用規約</a>
</nav>
</footer>
</body>
</html>
まとめ
| 要素 | 用途 |
|---|---|
<header> |
ヘッダー領域 |
<nav> |
ナビゲーション |
<main> |
メインコンテンツ（1つだけ） |
<article> |
独立したコンテンツ |
<section> |
テーマを持つグループ |
<aside> |
補足コンテンツ |
<footer> |
フッター領域 |
<time> |
日時情報 |
<details> / <summary> |
折りたたみコンテンツ |
重要ポイント
<div>の代わりにセマンティック要素を使う<main>は1ページに1つだけ<article>は独立して意味が通じるかで判断- ARIA属性は最後の手段として使う
練習問題
問題1: 基本
<header>, <main>, <footer>を使って、基本的なページ構造を作成してください。
問題2: 応用
ブログサイトのトップページを作成してください。3つ以上の<article>と<aside>を含めましょう。
チャレンジ問題
FAQページを<details>と<summary>で作成してください。5つ以上の質問と回答を含め、適切なセマンティック要素でマークアップしましょう。
参考リンク
次回予告: Day 9では「HTMLのベストプラクティス」について学びます。SEO、パフォーマンス、メタデータなど、実践的なテクニックを習得しましょう。