その `
現場でコードレビューをしていると、未だに「とりあえずページ上部にあるから `
HTML5が登場して早10年以上。セマンティック（意味論的）なマークアップは「検索エンジンへの配慮」という文脈で語られがちですが、本当に重要なのは、ブラウザがそのDOMをどう解釈し、スクリーンリーダーがどう構造を読み上げるかという、アクセシビリティの根幹に関わる部分です。
今日は、中級者エンジニアが一歩先へ進むために、`
—
1. ` ` の本来の定義を再定義する
多くの人が誤解していますが、`
つまり、以下の2つの役割のどちらか（あるいは両方）を果たしている必要があります。
- サイト全体の導入部（ロゴ、グローバルナビゲーション、キャッチコピーなど）
- セクション（articleやsection）のイントロダクション（見出し、サブタイトル、執筆日など）
ここでのポイントは、「ページ内に複数存在して良い」という点です。`
` の直下だけでなく、各 `—
2. ブラウザとアクセシビリティツリーの裏側
なぜ適切に配置する必要があるのか。それは、ブラウザが構築する「アクセシビリティツリー」に直結するからです。
スクリーンリーダーのユーザーは、ページ全体を逐一読み上げるのではなく、ランドマーク（主要な領域）を辿って目的のコンテンツへ飛びます。`
逆に、無意味に全てのブロックを `
—
3. やってはいけない「入れ子構造」の制限
ここが現場で最も注意すべき罠です。仕様として、`
- `
` 要素そのもの - `
- `
` 要素（※ただし、連絡先情報として使う場合は不可だが、慣習的に誤用が多いので注意）
特に、「headerの中にheaderを入れる」ことはHTML仕様上、完全にアウトです。もし「メインコンテンツの中にさらにサブセクションがある」という構造であれば、内側は `
`〜` `）や ` ` で構造化するのが正解です。 — 4. 現場で使える「実用的」なテンプレートコード
それでは、これらの要件をすべて満たした、堅牢な構造のサンプルを見てみましょう。
ロゴ画像など
フロントエンドのモダンな設計思想
投稿日:
はじめに
コンテンツ本文がここに入ります…
このコードの「賢い」ポイント
1. `
コメント