HTML コーディング規約

実装レイヤー選定（dzero-tech-selection）を経ていない場合は先にそちらを読むこと。詳細は HTML ガイドライン を参照。

実装規範

大原則

• HTML Living Standard の規定には例外なく従う
• アクセシビリティの基準と判断（WAI-ARIA・代替テキスト・キーボード操作）は dzero-a11y に従う
• リントエラー（Markuplint / pug-lint / Prettier）は例外なく必ず修正する。ルールが現状にそぐわない場合はコードを曲げず Config ファイルの変更を提案する

コンポーネント

• ページを構成するパーツは「コンポーネント」単位で管理する。クラス命名の形式（c- プレフィックス、__ によるエレメント区切り、コンポーネント境界、c-content-main 内の制約）は Markuplint が強制するため、警告に従って修正すればよい
• コンポーネント分割で重視するのは再利用性ではなく、独立して完結し他へ影響を与えないこと
• コンポーネントを拡張したいときは、クラスを足すのではなく完全に別のコンポーネントを作る（1 要素に複数のコンポーネントクラスを与えない）
• ボタン単体・フォームコントロール単体はコンポーネント化せず、エレメントとして扱う。スタイルが不要ならクラスのないエレメントがあってもよい

状態の管理

• 要素の状態は原則クラスを使わず、次の優先順位で管理する: 1. ネイティブ属性（disabled 等）→ 2. ARIA 属性（aria-expanded 等）→ 3. data-* 属性
• hidden 属性と aria-hidden は意味が異なる。同じものとして扱わない
• スタイルのみの目的で data-* 属性を使わない（エレメントクラスを使う）

文書構造

• 見出しタグは見た目ではなく文書アウトラインで判断する。見た目が見出しに見えるテキスト（カード内の改行された文言等）を安易に h3 / h4 にしない（レベルのスキップ等の機械検出は Markuplint が担保する）
• p 要素を濫用しない。段落でないテキストの縦並びには div を使う。画像単体を p で囲わない（テキストの代替画像を除く）
• 装飾のためだけの div / span を増やさない。装飾は CSS の擬似要素（::before / ::after）で実現できないか先に検討する

画像

• レスポンシブの出し分けは picture 要素を使う。sp-only / pc-only クラスでの img 二重配置はしない（display: none でも画像リクエストは発生する）
• ファーストビューより下の img にはなるべく loading="lazy" を指定する。decoding 属性は指定しない
• 代替テキストの付け方は dzero-a11y を参照

リンク・パス・外部リソース

• パスは原則 / で始まるルート相対で書く。外部リンクは // でなく https:// で始める
• ページ内リンク用の id（URL フラグメント）は適切に命名し、安易に削除・変更しない（外部からリンクされている可能性がある）
• 外部リソースの読み込みは原則禁止。セルフホストする（クライアント依頼・社内許可がある場合と、Google Maps 等セルフホスト不可能なものを除く）

メタ・記法

• <meta name="format-detection" content="telephone=no" /> は必須。ビューポートに user-scalable は書かない
• 論理属性の値は省略する（disabled="disabled" ではなく disabled）。省略可能な属性（type="text/css" 等）は書かない
• HTML コメントは製品コードに残るため不用意に書かない。Pug の変換時に削除されるコメント記法を活用する

命名

• 正しい英語を採用し、短さよりも明確さを優先する。省略は基本的に避け、使う場合は規定の省略語に統一する
• 文字構成: 半角英数とハイフン、区切りはハイフン、小文字。連番はゼロ埋め 2 桁以上
• クラス名は [機能名]-[修飾語・詳細]-[連番] の組み合わせ（[機能名] 以外は任意）
• 同じ意味の識別子は統一する: home（top 不可）、sub（corner 不可）、breadcrumb、carousel（slider / gallery 不可）、hero（mv / mainvisual 不可）、heading（headline 不可）、pagination（pager 不可）、prev（back 不可）