なぜ“動く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です。
- 見出し構造を守る
- divを減らす
- 意味のあるタグを選ぶ
これだけで、HTMLの“質”は一段上がります。
まとめ：「整ってるHTML」は技術より姿勢で決まる
整っているHTMLは、
特別なテクニックで書かれているわけではありません。
- 読む人を意識する
- 意図を伝えようとする
- 将来の修正を考える
この姿勢が、HTMLの一行一行に現れます。
動けばいいHTMLから
信頼されるHTMLへ
それが、「整ってるHTML」を書ける人です。
