以下は「初心者から上級者（実務レベル／最適化・運用まで含む）」へ到達するために学ぶべき内容を、段階ごとに細分化した包括的カリキュラムです。
各段階に目的（習得ゴール）、学習トピック、演習／ミニプロジェクト、確認チェックリストを記載しています。
実務で使える知識と、アクセシビリティ・パフォーマンス・セキュリティを意識した最適化まで含みます。
ツールと基礎知識の準備
目的：学習環境を整え、基礎用語とWebの仕組みを理解する。
- テキストエディタ（VS Code等）、バージョン管理（Git）の導入
- ブラウザ（Chrome/Firefox/Edge）の開発者ツールの使い方
- HTTPの基本（リクエスト/レスポンス、ステータスコード、ヘッダ）
- ファイル構成とローカルサーバ（Live Server 等）
演習 - 簡単な index.html を作成してブラウザで表示
- DevTools の Elements / Console / Network を触る
チェック - エディタで保存→ブラウザで反映ができる
- DevToolsでDOM・ネットワークを確認できる
初級（HTMLの基本）
目的：HTMLの基礎文法と基本的な要素の使い方を習得する。
- HTMLドキュメントの基本構造（<!doctype>, <html>, <head>, <body>）
- 基本のテキスト要素：見出し（<h1>〜<h6>）、段落（<p>）、改行
- インライン要素とブロック要素の違い
- リンク（<a>）、画像（<img>）、リスト（<ul>, <ol>, <li>）
- 基本のフォーム要素（<input>, <label>, <button>, <select>）
- 属性の扱い、クラス・id の基本
- メタ情報（<meta charset> 等）、基本のUTF-8取り扱い
演習 - 自己紹介の静的な1ページ（写真、リンク、箇条書き）を作る
- 簡単な問い合わせフォーム（送信先はダミー）
チェック - 画像に alt 属性が付いている
- フォーム要素に <label> が紐づけられている
基礎強化（セマンティクスとマルチメディア）
目的：意味のあるマークアップ（セマンティックHTML）とマルチメディア要素を理解する。
- セマンティック要素：<header>, <nav>, <main>, <article>, <section>, <aside>, <footer>
- テーブル（<table>, <thead>, <tbody>, <tr>, <th>, <td>）の正しい使い方
- メディア要素：<audio>, <video> の属性（controls, preload, poster 等）
- SVG の基本（インラインSVG と <img> による利用）
- 基本のメタタグ（SEOのためのtitle, description, viewport）
- 外部リソースの読み込み（<link rel=”stylesheet”>, <script src> の基本）
- 簡単なアクセシビリティ概念（alt, lang, visible focus）
演習 - ブログ記事のマークアップ（セマンティックに）
- 動画＋キャプションを埋め込むページ
チェック - ページに <main> が存在する
- lang 属性が html 要素に設定されている
中級（アクセシビリティ・レスポンシブ・HTML API）
目的：実務で使えるアクセシビリティ（A11Y）、レスポンシブ技術、HTML5 APIの基礎を身につける。
- フォームの詳細：required, pattern, type=email|tel|number、ネイティブ検証
- ARIA（role, aria-*）の基礎と適切な使いどころ（乱用しない）
- レスポンシブ画像：srcset, sizes, <picture>
- モバイル向けメタ（viewport, touch-action）
- HTML5 Web API 入門：Canvas, Web Storage（localStorage/sessionStorage）、Geolocation、History API、Fetch（基本的な利用）
- マイクロデータとJSON-LD（構造化データの概念）
- インラインSVGとアイコン利用方法
演習 - 画像最適化を含むレスポンシブトップページ
- ローカルストレージを使った簡易メモアプリのフロント（HTML＋少量のJS）
チェック - 画像に srcset/sizes を適用した例がある
- キーボードで主要操作ができる
上級（パフォーマンス、アクセシビリティ深掘り、セキュリティ）
目的：ページの高速化、堅牢なアクセシビリティ、HTML上での基本的セキュリティ施策を実装できる。
- ローディング最適化：loading=”lazy”, preload, prefetch, rel=”noopener noreferrer”, CSS/JS の非同期読み込みパターン
- 画像・メディアの最適化（WebP/AVIF の概念、最小サイズでの配信）
- HTMLで行うセキュリティの基本：CSP の概念（<meta http-equiv=”Content-Security-Policy”>での案内）、外部スクリプトの扱い、HTMLインジェクション・XSSの回避（サニタイズの重要性）
- アクセシビリティの深掘り：WCAG の原則（Perceivable, Operable, Understandable, Robust）、スクリーンリーダー向けのランドマーク、フォームのエラーメッセージ設計
- 国際化（lang, dir, hreflang）、言語切替の実装方針
- PWA の基本（manifest.json と Service Worker 概念）
実践例：遅延読み込み
<img src="small.jpg" srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w" sizes="(min-width:1024px) 1024px, 100vw" loading="lazy" alt="説明">
演習
- Lighthouse（または同等のツール）で指摘を受けた項目を修正してスコアを改善
- PWA化：オフラインでホーム画面追加ができる簡易サイト
チェック - Lighthouse のパフォーマンス指標が改善されていること（画像遅延読み込み、不要リソース削減 等）
- 主要なフォームに対して視覚・非視覚ユーザー向けのエラーハンドリングがある
エキスパート（運用・CI・自動化・最適化の体系）
目的：運用フェーズでのHTML資産の維持、品質保証、自動化、最先端の最適化手法を習得する。
- HTMLの自動検証：HTML Validator、アクセシビリティ自動ツール（axe、pa11y）
- Lint／フォーマット：htmlhint やエディタ設定によるコード規約の自動化
- CI/CD パイプラインでの検証（ビルド前テストとしてのバリデーション）
- サイト生成とテンプレート：静的サイトジェネレータ（SSG）やテンプレートのHTML出力設計（SSR vs SSG vs CSRの違いとHTMLへの影響）
- 国際サイトのHTML設計（多言語テンプレート、SEO と hreflang 運用）
- 画像配信戦略：CDN、レスポンシブ配信、フォールバック戦略
- HTTP最適化：キャッシュヘッダ、圧縮、HTTP/2 と HTTP/3 の影響
- 計測とモニタリング：Lighthouse CI、Field Data（Core Web Vitals）運用
演習／プロジェクト - CI に組み込む HTML/Accessibility テストを作成する
- 既存サイトを PWA＋CDN＋Lighthouse 改善の一連作業で最適化する
チェック - PR 時に自動で HTML バリデーションとアクセシビリティチェックが走る
- Core Web Vitals の主要指標が改善傾向にある
よくある落とし穴と対処法
- 画像に alt を付け忘れる → SEO・A11Yの両面でマイナス。必ず埋める。装飾画像は空文字（alt=””）。
- ARIA の乱用 → 本来のセマンティクスで解決できる場合は ARIA を使わない。
- <div>乱用（セマンティック不足）→ 構造を読みやすくするためにセマンティック要素を優先。
- 外部スクリプトの同期読み込みでレンダーブロック → defer/async/preloadを検討。
- フォームのネイティブ検証に依存しすぎる → クライアント＋サーバ両方で検証を行う。
便利な学習リソース
- MDN Web Docs（HTML / Accessibility 解説）
- WHATWG HTML Living Standard（仕様）
- W3C / WCAG（アクセシビリティ基準）
- Lighthouse（パフォーマンス監査ツール）
- WebAIM（アクセシビリティ実践情報）
- 書籍例：Jon Duckett『HTML and CSS』など（概念整理に有用）
（上記は検索して最新情報／ツールの導入手順を確認してください）
