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

Posted on by

なぜ“動くHTML”と“評価されるHTML”は違うのか？

「動くHTML」と「整ってるHTML」は別物

HTMLを書き始めてしばらくすると、こんな経験をする人が多いはずです。

  • 表示は問題なく動いている
  • デザインも一応再現できている
  • でもコードレビューで指摘が多い
  • 自分で見返すと、正直わかりにくい
  • 後から修正するのがしんどい

このとき、多くの人はこう思います。

「もっとCSSやJSを勉強しないとダメなのかも」

ですが、実務で本当に差がつくのは
HTMLの“整い方”です。

整っているHTMLとは、

  • 読みやすい
  • 意図が伝わる
  • 構造が自然
  • 修正・拡張しやすい

つまり、

人が読むことを前提に書かれているHTML

この記事では、
レビューで評価される「整ってるHTML」を書くための
マークアップの黄金ルールを、具体例つきで解説します。

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

まず定義をはっきりさせましょう。

■ 整ってるHTMLとは

見た目ではなく“意味と構造”が整理されたHTML

です。

よくある誤解はこれです。

  • インデントが揃っていればOK
  • コメントを書いていればOK
  • class名があればOK

これらは「最低条件」であって、
整っている理由ではありません。

整っているHTMLは、次の特徴を持っています。

  • タグの役割が明確
  • 見出し構造が自然
  • 不要なdivがない
  • 構造を見ただけで内容が想像できる

黄金ルール①「HTMLは見た目ではなく構造で書く」

まず最重要ルールです。

HTMLはデザインを作るための言語ではない

HTMLは「文書構造」を表現する言語です。

悪い例（見た目優先）

<div class="title">サービス紹介</div>
<div class="text">当社は〜</div>

見た目は作れますが、意味は不明確です。

良い例（構造優先）

<h1>サービス紹介</h1>
<p>当社は〜</p>
  • 見出し → hタグ
  • 本文 → pタグ

タグの意味＝構造を優先するだけで、
HTMLは一気に読みやすくなります。

黄金ルール②「見出し構造は“目次”として考える」

HTMLを読む人（人間・検索エンジン）は、
まず見出し構造を見ます。

■ 正しい見出しの考え方

  • h1：ページの主題（1つだけ）
  • h2：章
  • h3：節
  • h4：補足

よくあるNG

<h1>会社概要</h1>
<h3>代表挨拶</h3>
<h2>沿革</h2>

順番がバラバラで、文書構造が崩れています。

理想的な構造

<h1>会社概要</h1>

<h2>代表挨拶</h2>
<p>〜</p>

<h2>沿革</h2>
<p>〜</p>

見出しはデザイン用ではなく、文書の骨格。
見た目はCSSで整えましょう。

黄金ルール③「divは最後の手段」

整っていないHTMLの最大の原因は
divの使いすぎです。

div地獄の例

<div class="box">
  <div class="inner">
    <div class="title-wrap">
      <div class="title">タイトル</div>
    </div>
  </div>
</div>
  • 何の塊かわからない
  • 修正時に迷子になる
  • 構造が見えない

意味を持たせた例

<article class="card">
  <h3 class="card__title">タイトル</h3>
  <p class="card__text">説明文</p>
</article>

divは「意味を持たせられないとき」に使う。
意味があるなら、意味のあるタグを選ぶ。

黄金ルール④「sectionとarticleを正しく使い分ける」

ここは多くの人が曖昧なまま使っています。

■ sectionとは

  • ページ内の“話題のまとまり”
  • 見出しとセットで使う
<section>
  <h2>サービス内容</h2>
  <p>〜</p>
</section>

■ articleとは

  • 単体で成立するコンテンツ
  • 再利用・独立性が高い
<article>
  <h3>サービスA</h3>
  <p>説明文</p>
</article>

「これ単体で意味が通る？」
この問いで判断すると、HTMLが一気に整理されます。

黄金ルール⑤「クラス名は“見た目”ではなく“役割”で付ける」

見た目ベースのclass名

<div class="red-box">
<div class="big-text">

後からデザインが変わると、
class名と中身がズレます。

役割ベースのclass名

<div class="alert">
<p class="lead-text">

役割がわかるclass名は、HTMLを読む人の理解を助けます。

黄金ルール⑥「インデントは“思考の跡”」

インデントは装飾ではありません。

構造を可視化するためのもの

■ 良いインデント

<article>
  <h2>タイトル</h2>
  <p>本文</p>
</article>

■ 悪いインデント

<article>
<h2>タイトル</h2>
<p>本文</p>
</article>

インデントが揃っているだけで、
HTMLは「読めるコード」になります。

黄金ルール⑦「コメントは“理由”を書く」

悪いコメント

<!-- section -->

見ればわかる情報は不要です。

良いコメント

<!-- 料金プラン：後からCMS化予定 -->

コメントは、

なぜ存在するのか
なぜこの構造なのか

を書くために使います。

黄金ルール⑧「HTML単体で意味が通るかを確認する」

CSSを外した状態を想像してみてください。

  • 見出しの流れは自然か
  • 情報の順番は理解できるか
  • どこからどこまでが1まとまりかわかるか

これがYESなら、HTMLは整っています。

整ってるHTMLがもたらすメリット

■ 実務でのメリット

  • レビュー指摘が減る
  • 修正が速くなる
  • WordPress化しやすい
  • SEO・アクセシビリティに強い
  • チームが安心する

整っているHTMLは、

「この人に任せて大丈夫」と思わせる力

を持っています。

駆け出しコーダーがまず意識すべき3つ

全部を一気に完璧にする必要はありません。

まずはこの3つだけでOKです。

  1. 見出し構造を守る
  2. divを減らす
  3. 意味のあるタグを選ぶ

これだけで、HTMLの“質”は一段上がります。

まとめ：「整ってるHTML」は技術より姿勢で決まる

整っているHTMLは、
特別なテクニックで書かれているわけではありません。

  • 読む人を意識する
  • 意図を伝えようとする
  • 将来の修正を考える

この姿勢が、HTMLの一行一行に現れます。

動けばいいHTMLから
信頼されるHTMLへ

それが、「整ってるHTML」を書ける人です。