1. セマンティックHTML（意味のあるタグ）
<header> / <nav> / <main> / <section> / <article> / <footer> を 使う と 構造が 明確に なり 伝わりやすい。
セマンティックな骨組み
2. アクセシビリティの要点
- 画像には
alt - フォームは
labelとidを対応させる - 見出し階層（
h1 > h2 > h3…）を守る - 色だけで情報を伝えない（テキストも添える）
- リンク文は「こちら」ではなく内容が分かる文に
3. 小さなSEOとパフォーマンス
<title>と<meta name="description">を適切に。- 画像はサイズ最適化＋
loading="lazy"。 - CSS/JSは可能なら1ファイルにまとめる、CDNの活用。
タイトルと説明の例
章末ミニプロジェクト：最終チェックリスト
- 見出し階層は正しいか？（h1は1つが目安）
- 画像に意味のある
altがあるか？ - リンク文は内容が伝わるか？
- フォームに
labelが対応しているか？ - スマホでも崩れないか？（横幅・文字・余白）