html

HTML 開発ガイドライン

基本原則

• アクセシビリティと SEO を向上させるため、セマンティック HTML を記述します
• 各要素を本来の目的に応じて適切に使用します
• 適切なドキュメント構造と階層を確保します
• 必要に応じて ARIA のロールと属性を使用し、アクセシビリティを優先します

セマンティック要素

ドキュメント構造

• 導入コンテンツとナビゲーションには <header> を使用します
• メインコンテンツには <main> を使用します（1 ページにつき 1 つ）
• フッターコンテンツには <footer> を使用します
• ナビゲーションセクションには <nav> を使用します
• 間接的に関連するコンテンツには <aside> を使用します

コンテンツセクション

• 独立して配布できるコンテンツには <article> を使用します
• コンテンツをテーマごとにグループ化するには <section> を使用します
• 適切な見出し階層（<h1> から <h6>）を使用します
• 1 ページに <h1> は 1 つだけ使用し、メインテーマを表します

テキストコンテンツ

• 段落には <p> を使用します
• リストには用途に応じて <ul>、<ol>、<dl> を使用します
• 引用には <blockquote> を使用します
• 図やイラストには <figure> と <figcaption> を使用します

インタラクティブ要素

ボタンとリンク

• ページ遷移を伴わないクリック操作には <button> を使用します
• URL に移動するリンクには <a> を使用します
• リンクには必ず href 属性を含めます
• クリック可能な要素に <div> や <span> は使用しません

フォーム

• 適切な action 属性と method 属性を指定して <form> を使用します
• for 属性を使用してラベルと入力欄を関連付けます
• 適切な入力タイプ（email、tel、number など）を使用します
• 関連する入力欄は <fieldset> と <legend> でグループ化します
• 検証属性（required、pattern、min、max）を含めます

メディア要素

画像

• 画像には必ず alt 属性を含めます
• 情報を伝える画像には説明的な代替テキストを使用します
• 装飾用の画像には空の alt="" を使用します
• レスポンシブ画像には srcset と sizes を使用します
• レイアウトシフトを防ぐため、width と height を指定します

動画と音声

• キャプションと文字起こしを用意します
• 互換性を確保するため、複数のソース形式を含めます
• 動画のサムネイルには poster 属性を使用します
• 自動再生がユーザー体験に与える影響を考慮します

アクセシビリティ（ARIA）

ARIA を使用する場合

• ネイティブ HTML のセマンティクスでは不十分な場合に ARIA を使用します
• 可能な場合は ARIA よりもネイティブ HTML 要素を優先します
• ARIA 属性が実際の要素の動作と一致するようにします

よく使用する ARIA 属性

• アクセシブルな名前には aria-label を使用します
• 追加の説明には aria-describedby を使用します
• 装飾用の要素には aria-hidden を使用します
• 展開可能なセクションには aria-expanded を使用します
• 動的なコンテンツの更新には aria-live を使用します

ランドマーク

• ランドマークロールを使用してページの領域を定義します
• すべてのコンテンツがランドマーク内に含まれるようにします
• セマンティック要素を使用できない場合に限り、role="main"、role="navigation" などを使用します

ベストプラクティス

ドキュメントメタデータ

• 適切な <!DOCTYPE html> 宣言を含めます
• <html> 要素に言語属性を設定します
• レスポンシブデザイン用の viewport メタタグを含めます
• SEO に適したメタタグを使用します

コード品質

• W3C バリデーターを使用して HTML を検証します
• インデントを一貫させます
• 自己終了タグを含め、すべてのタグを適切に閉じます
• 要素名と属性名には小文字を使用します

非推奨の要素

• スタイル設定には <font>、<center>、<b>、<i> を使用しません
• 見た目の調整には CSS を使用します
• セマンティックな強調には <strong> と <em> を使用します

HTMX との統合

HTMX を使用してインタラクティブ機能を実装する場合：

• サーバーへのリクエストには hx-get、hx-post 属性を使用します
• 更新対象の指定には hx-target を活用します
• コンテンツの挿入方法を制御するには hx-swap を使用します
• 重要な操作には hx-confirm を実装します
• ページ全体を再読み込みせず URL を更新するには hx-push-url を使用します

Bootstrap との統合

Bootstrap を使用する場合：

• レイアウトには Bootstrap のグリッドシステムを活用します
• 適切なマークアップ構造で Bootstrap コンポーネントを使用します
• コンポーネントに必要な ARIA 属性を含めます
• 余白やタイポグラフィには Bootstrap のユーティリティクラスを使用します
• Bootstrap のクラスを使用して、カスタム CSS を最小限に抑えます

パフォーマンス

• DOM の深さと複雑さを最小限に抑えます
• 適切に defer または async を指定してスクリプトを読み込みます
• ファーストビューより下にある画像には loading="lazy" を使用します
• <link rel="preload"> で重要なリソースを事前読み込みします