「整ってるHTML」はこう書く！読みやすいマークアップの黄金ルール

Posted on by

〜見る人・触る人が“気持ちいい”コードを目指して〜

「動く」だけじゃもったいない

HTMLを書いていて、こんな経験はありませんか？

  • コードは動くけど、どこに何があるかわかりにくい
  • 数か月後に見たら、自分でも理解できない
  • 他人が触ると「これ、どこを直せばいいんですか？」と聞かれる

そう、“動く”ことと“整っている”ことはまったく別物です。

HTMLの美しさとは、見た目ではなく構造と可読性にあります。
この記事では、実務でも評価される「読みやすく整ったHTML」を書くための黄金ルールを紹介します。

「整っているHTML」とは何か？

まず、「整っている」とはどういう状態でしょうか？
以下の3点を満たすHTMLが“整っている”といえます

  1. 構造が明確で、目的が一目でわかる
  2. インデントや改行が統一されている
  3. 意味のあるタグ・クラス名で構成されている

つまり、整ったHTMLとは、人が読んで理解できるHTMLのことです。
ブラウザにとってではなく、“次に触る人”に優しいコード。
これが、プロの現場で最も重視されるポイントです。

黄金ルール① 意味のあるタグを使う（セマンティックHTML）

悪い例

<div class="header">
  <div class="menu">
    <div class="item">HOME</div>
    <div class="item">ABOUT</div>
  </div>
</div>

ブラウザは動きますが、これでは構造が不明確。
検索エンジンや支援技術（スクリーンリーダー）にも伝わりにくいです。

良い例

<header>
  <nav>
    <ul>
      <li><a href="/">HOME</a></li>
      <li><a href="/about">ABOUT</a></li>
    </ul>
  </nav>
</header>
  • <header> … ページ上部の共通構造
  • <nav> … ナビゲーションであることを明示
  • <ul>＋<li> … 複数のリンク構造を正しく表現

これだけで、HTMLが「意味のある文章」になります。
整ったHTMLは、構造の文章として読めることが大切です。

ワンポイント

  • 「見た目を整える」のはCSS、「意味を整える」のはHTML。
  • <div>は最後の手段。構造に意味があるときは専用タグを選ぼう。

黄金ルール② クラス名は“役割”を表す

NG例（装飾ベースの命名）

<div class="red-box">エラーが発生しました</div>

→ 色が変わったらクラス名が破綻します。

OK例（意味ベースの命名）

<div class="alert">エラーが発生しました</div>

→ .alertなら、スタイルを変えても意味が変わらない。

ポイント：命名は「何のために存在しているか」で決める。

悪い例（装飾ベース）良い例（意味ベース）
.blue-btn.btn-primary
.small-text.note
.margin-top20.section-space
.bold.emphasis

また、複数単語はハイフンで区切る（kebab-case）のが一般的です。

<div class="site-header"></div>
<div class="main-visual"></div>
<div class="contact-form"></div>

このように命名を統一するだけで、ファイル全体の可読性が一気に上がります。

黄金ルール③ インデントと改行で“見える構造”を作る

ぐちゃぐちゃな例

<section><div><h2>サービス</h2><p>内容説明です。</p></div></section>

1行に詰め込むと、どこで要素が始まり終わるのかが不明。
一見短くても、メンテナンス性が極端に下がります。

整った例

<section>
  <div class="service">
    <h2>サービス</h2>
    <p>内容説明です。</p>
  </div>
</section>
  • 親子関係がインデントで一目瞭然
  • 修正や差し込みが簡単
  • コードレビューでもストレスがない

補足：インデントのルール

  • スペース2つ or 4つで統一（Tab混在NG）
  • 要素をネストするたびに1段階下げる
  • 空行をうまく使い、「意味の区切り」を可視化

インデントは「HTMLの呼吸」。
整っていれば、構造が見えるHTMLになります。

黄金ルール④ 不要なdivとclassを減らす

HTMLで最もありがちな問題は、divの乱用。
気づけば <div> のマトリョーシカ状態になっていませんか？

NG例

<div class="box">
  <div class="text-box">
    <div class="title">サービス紹介</div>
  </div>
</div>

OK例

<section class="service">
  <h2 class="service-title">サービス紹介</h2>
</section>

HTMLにはすでに「意味を持つタグ」が用意されています。
<div>を使うのは、どうしても代替がない場合のみです。

また、クラスも最小限にすることでスタイル指定がシンプルになります。

ルール

  • 1要素にクラスを3つ以上つけない
  • 構造を再利用したいときだけクラスを使う
  • 無駄なラッパーdivを作らない

黄金ルール⑤ コメントで“地図”をつける

大規模ページでは、HTML構造を理解するためにコメントが欠かせません。

実践例

<!-- =====================
  ヘッダー
===================== -->
<header class="site-header">
  <h1><a href="/">My Portfolio</a></h1>
</header>

<!-- =====================
  メインコンテンツ
===================== -->
<main>
  <section class="works">...</section>
  <section class="about">...</section>
</main>

コメントは「ここからここまでが1ブロック」という地図の役割。
特に複数人で作業する場合、
「headerどこまで？」「section閉じタグどこ？」が一瞬でわかるようになります。

コメントのコツ

  • ブロックごとに統一デザイン（＝目で追いやすい）
  • CSS側にも同じ区切りを入れるとより親切
  • ただし細かすぎるコメントは逆効果（主要部分に限定）

黄金ルール⑥ 一貫性を保つ（整ってるHTMLの本質）

最後に、整っているHTMLの最大の条件は「一貫性」です」。

  • すべてのページで同じインデント幅
  • 見出しレベル（h2 → h3 → h4）が順序通り
  • クラス命名ルールを全ページ共通化
  • コメントスタイルを揃える

これが徹底されているサイトは、
どのファイルを開いても“安心して触れる”状態になっています。

理想のHTML構造例（まとめ）

<!-- =====================
  サービスセクション
===================== -->
<section class="service">
  <div class="container">
    <h2 class="section-title">SERVICE</h2>
    <ul class="service-list">
      <li class="service-item">
        <img src="img/web.jpg" alt="Web制作">
        <h3 class="service-name">Webサイト制作</h3>
        <p class="service-text">デザインから実装まで一貫対応します。</p>
      </li>
    </ul>
  </div>
</section>

ここまで整っていれば、後任者が見ても「迷わず修正できるHTML」になっています。

まとめ：「整ってるHTML」は思いやりのコード

HTMLを整えるというのは、単なる形式美ではありません。
“次の人への優しさ”です。

  • 意味のあるタグを選ぶ（構造を伝える）
  • 命名を統一する（再利用しやすく）
  • インデントとコメントで整理する（見やすく）

これらを意識するだけで、
あなたのHTMLは「書く人」から「読む人」に優しいコードに変わります。

美しいデザインは、整ったHTMLから生まれる。
コードの見た目を整えることが、サイトの信頼を支える第一歩です。

#HTMLコーディング #Web制作 #フロントエンド #コーディング学習 #Webデザイン #マークアップ #HTML #CSS #読みやすいコード #セマンティックHTML #Webデザイナー #コーダー初心者 #Web開発 #コード整形 #VSCode #デザイン思考