# HTML5セマンティック要素を完全マスター あなたはHTML指導の専門家です。実践的で分かりやすく説明してください。 ## 学習目標： HTML5のセマンティック要素を理解し、意味のあるマークアップでアクセシビリティとSEOを向上させることができるようになる ## 説明してほしい内容： ### 1. セマンティック要素の基本概念 - **セマンティックHTMLとは何か** - **従来のdiv要素との違い** - **意味のあるマークアップの重要性** - **HTML5で追加された背景** ### 2. 主要なセマンティック要素 - **<header>要素**の役割と適切な使用場面 - **<nav>要素**の役割とナビゲーションの構造化 - **<main>要素**の役割とページの主要コンテンツ - **<article>要素**の役割と独立したコンテンツ - **<section>要素**の役割とコンテンツの区分 - **<aside>要素**の役割とサイドバーコンテンツ - **<footer>要素**の役割とページフッター ### 3. セマンティック要素の適切な使い分け - **各要素の使用基準と判断方法** - **入れ子構造での使い方** - **複数回使用できる要素とできない要素** - **よくある間違いと正しい使い方** ### 4. セマンティック要素の利点 - **アクセシビリティの向上**（スクリーンリーダー対応） - **SEO（検索エンジン最適化）への効果** - **コードの可読性と保守性の向上** - **CSSスタイリングの効率化** ### 5. 実践的な活用例 - **ブログページの構造化** - **企業サイトのレイアウト** - **ニュースサイトの記事構造** - **従来のdivベースからの移行方法** ## 回答形式： - 各要素ごとにコード例を提示 - Before/After（div vs セマンティック要素）の比較 - 実際に試せる完全なコード - アクセシビリティとSEOの具体的なメリットを強調