セマンティック要素（HTML5）

意味を持つ要素を使うことで、検索エンジン・スクリーンリーダー・開発者にとって理解しやすい構造になります。

フォーム

    

        ユーザー名:
        
    
    

        メール:
        
    
    

        パスワード:
        
    
    

        誕生日:
        
    
    

        好きな色:
        
    
    

        性別:
         男性
         女性
    
    

        国:
        
            日本
            アメリカ
        
    
    

        メッセージ:
        
    
    送信

HTML5 で追加された入力タイプ: email、url、tel、number、range、date、time、color、search 等。ブラウザがバリデーションと専用 UI を提供します。

メディア要素

アクセシビリティ (a11y)

• alt 属性: 画像には必ず代替テキスト。装飾画像は alt=""
• 見出しレベル: h1 → h2 → h3 の順に階層的に。スキップしない
• label: フォーム入力には を必ず付ける
• ARIA 属性: aria-label、aria-hidden、role 等で意味を補足
• 色のコントラスト: WCAG AA 基準 4.5:1 以上
• キーボード操作: tabindex、:focus スタイル

バリデーションと検証ツール

• W3C Markup Validator: https://validator.w3.org/ で構文チェック
• HTML Living Standard: https://html.spec.whatwg.org/ が公式仕様
• MDN Web Docs: https://developer.mozilla.org/ がリファレンスの定番
• Lighthouse: Chrome DevTools でアクセシビリティ・SEO 監査

FAQ

Q: HTML5 はもう古い？
A: 仕様としては HTML Living Standard に移行しましたが、機能セット（HTML5）は現役です。バージョン番号の概念がなくなっただけ。

Q: XHTML との違いは？
A: XHTML は XML の厳格な構文（必ず閉じタグ、属性は小文字 等）を要求しました。HTML5 では緩和されています。ただし JSX や Vue では XML 風の厳格な書き方が必要。

Q: