コンテンツにスキップ

03.HTML コーディング規約

このドキュメントでは、HTMLの記述に関するスタイルと規約を定めます。 セマンティックで、アクセシブル、かつ保守性の高いマークアップを目指します。

1. 基本方針

  • HTML5標準: 全てのHTMLドキュメントは、HTML5のDOCTYPE宣言 (<!DOCTYPE html>) から始め、その仕様に準拠します。
  • 文字エンコーディング: <meta charset="utf-8"> を<head>タグのできるだけ早い段階で指定し、文字エンコーディングをUTF-8とします。
  • バリデーション: W3CのMarkup Validation Serviceなどで、文法的なエラーがないことを確認することを推奨します。

2. フォーマット

コードのフォーマットは、Prettierによって自動的に整形されることを前提とします。

  • インデント: プロジェクトで定義されたインデント幅（通常は半角スペース2つ）に従います。
  • クォーテーション: 属性値は、常にダブルクォーテーション (") で囲みます。
  • タグの小文字: 全ての要素名、属性名は小文字で記述します。

3. セマンティック・HTML

タグを、単なる「見た目」のためではなく、その「意味」や「役割」に応じて正しく使用します。

  • ランドマーク: <header>, <nav>, <main>, <footer>, <aside> などのランドマーク要素を適切に使い、ページの構造を明確にします。
  • 見出し: <h1>〜<h6>の階層を正しく使用します。<h1>はページに1つだけとし、見出しレベルを飛ばさないでください。（例: <h2>の次に<h4>を置かない）
  • ボタン: ユーザーがクリックして何かのアクションを起こす要素には、<div>や<span>ではなく、必ず<button>要素を使用します。
  • <b>, <i>の不使用: 太字や斜体のためだけに<b>や<i>を使用せず、強調の意味を持つ<strong>や<em>を使用します。

4. アクセシビリティ (a11y)

全てのユーザーが情報にアクセスできるよう、基本的なアクセシビリティを確保します。

  • alt属性: 全ての<img>タグには、その画像の内容を説明する適切なalt属性を必ず指定します。装飾目的で意味のない画像の場合は、alt=""のように空にします。
  • lang属性: <html>タグには、ページの主要な言語を示すlang属性（例: lang="ja"）を指定します。
  • label要素: <input>, <textarea>, <select>などのフォーム要素には、必ず対応する<label>要素をfor属性で関連付けます。

5. その他

  • Boolean属性: disabled, checked, required のようなブーリアン属性には、値を指定しません。（例: disabled="disabled"ではなくdisabledと記述）
  • コメント: HTMLコメント (<!-- ... -->) は、複雑なDOM構造や、一時的に無効化するセクションを説明するために限定的に使用します。