HTML
コードスタイル
可読性・品質・一貫性を重視したHTMLのフォーマットとインデントルール
次の 3 つを主な目的として策定されています。
- 可読性・保守性
- 一貫した記述スタイルによりコードの可読性を向上させること
- チーム開発において誰でも理解しやすい記述にすること
- 品質の向上
- 正しく適切な HTML マークアップを行うこと
- アクセシビリティを考慮した記述にすること
- 一貫性
- プロジェクト内での統一されたコーディングルールを持つこと
- メンテナンス時の混乱を避けること
フォーマットとインデント
HTML のコードフォーマット（インデント、改行、属性の順序など）は Prettier, EditorConfig によって自動修正されます。これらのツールを使用することで、手動でのフォーマット調整を不要にし、チーム全体で一貫したコードスタイルを維持します。
インデントルール
- インデントは半角 2 スペースで統一する
- スペースとタブを混在させることは禁止
- ネストの深さに応じて適切にインデントを行う
- 案件によってはインデント規則が指定される場合があるため、随時確認する
改行ルール
- 要素の開始タグと終了タグが複数行にわたる場合は適切に改行する
- 構造を判断しやすいように改行とインデントを使用する
- 属性が多い場合は、可読性を考慮して改行する
コード例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ページタイトル</title>
</head>
<body>
<header>
<h1>メインタイトル</h1>
</header>
<main>
<section>
<h2>セクションタイトル</h2>
<p>段落テキスト</p>
</section>
</main>
</body>
</html>
HTML に記述したコメントは、製品ソースコード上にそのまま残るため、エンドユーザーがブラウザの「ページのソースを表示」などで内容を確認できる状態になります。そのため、不用意なコメントや内部情報、機密情報などは記述しないように注意してください。