HTML スタイルガイドとコーディング規約

Volardev 編集部 April 12, 2026

スマートでクリーンなHTMLを書くことは、単に見栄えが良いだけでなく、将来の自分やチームメンバーがコードを読み、修正しやすくするために極めて重要です。また、ブラウザによる解釈ミスを防ぎ、SEOの効果を最大化することにも繋がります。

ここでは、一般的によく使われるHTML5のコーディング規約をまとめていきます。

1. ドキュメントタイプ (Proper Document Type)

HTMLドキュメントの最初の行には、常にドキュメントタイプを宣言してください。

<!DOCTYPE html>

HTML5ではタグ名に大文字・小文字を混ぜても動作しますが、小文字を使用するのが世界のデファクトスタンダードです。

小文字の方が読みやすく、コードの記述もスムーズになります。

HTML5では、属性値を引用符（"）で囲まなくても許可される場合がありますが、可読性とエラー防止のために必ず囲むようにしましょう。

特に、属性値にスペースが含まれる場合（例：class="main content"）、引用符がないとブラウザが正しく解釈できません。

画像（<img>）には、常に alt 属性を指定してください。画像が表示されない場合や、スクリーンリーダーを利用するユーザーにとって重要な情報となります。

また、画像を表示する前にブラウザがレイアウトを確保できるよう、width と height を指定しておくのがベストプラクティスです。

<img src="html5.gif" alt="HTML5ロゴ" style="width:128px;height:128px;">

コードの階層構造を分かりやすくするために、2つのスペースでインデント（字下げ）を行うのが一般的です（タブ文字の使用は環境によって見え方が変わるため、スペースが推奨されます）。

<body>

  <h1>見出し</h1>
  <div>
    <p>これは段落です。</p>
  </div>

</body>

また、大きなブロックの間には空行を入れて、視覚的に区切りを明確にしましょう。

検索エンジン（SEO）やブラウザの挙動を最適化するために、<head> 内の設定は欠かせません。

ドキュメントの文字化けを防ぐため、できるだけ早く（通常は <title> より前に）宣言します。

<meta charset="UTF-8">

レスポンシブデザインを正しく機能させるために必須です。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

[!TIP]
「自分が書いたコードを3ヶ月後の自分が読んだとき、すぐに理解できるか？」を常に意識してみてください。美しく整ったコードは、バグの発見を早め、開発効率を劇的に向上させます。