HTMLの整形 — マークアップのフォーマットとインデント

HTMLの整形の仕組み

HTMLの整形は、圧縮されたまたは不適切にフォーマットされたマークアップを取り、クリーンなインデント構造に復元します。フォーマッターはHTMLをDOMツリーに解析し、一貫したフォーマットルールで再シリアライズします。

ビフォー・アフター

<!-- 圧縮された入力 -->
<div class=container><header><nav><ul><li><a href="/">Home</a></li><li><a href="/about">About</a></li></ul></nav></header><main><h1>Title</h1><p>Content here.</p></main></div>

<!-- 整形後の出力 -->
<div class="container">
  <header>
    <nav>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <h1>Title</h1>
    <p>Content here.</p>
  </main>
</div>

フォーマットの判断

HTMLの整形ツールはいくつかの構造的な選択を行います：

• インデントサイズ — ネストレベルごとに2スペース、4スペース、またはタブ。
• 属性のフォーマット — すべて1行に、多くの属性を持つ要素では1行に1属性、または指定された列幅で折り返し。
• 自己閉じタグ — <img />（XHTMLスタイル）または<img>（HTML5スタイル）のどちらを使用するか。
• インライン vs. ブロック要素 — インライン要素（<a>、<span>、<strong>）は周囲のテキストと同じ行に留まり、ブロック要素（<div>、<section>、<p>）は独自の行を取得します。
• セクション間の空行 — 読みやすさのために主要なセクション間にオプションで空行を追加。

混合コンテンツの処理

HTMLの整形で最も難しい部分は混合コンテンツ — テキストと子要素の両方を含む要素です：

<p>Read the <a href="/docs">documentation</a> for details.</p>

良いフォーマッターはこれを1行に保持します。複数行に分割するとレンダリング結果に不要な空白が入るためです。

HTMLの整形ツール

• Prettier — 埋め込みCSSとJavaScriptを含むHTMLを処理します。
• js-beautify（html-beautify） — 設定可能なHTMLフォーマッター。
• VS Code内蔵フォーマッター — 基本的なHTMLフォーマットを提供します。

整形を行うタイミング

• サーバーレンダリングされたHTMLのデバッグでDOM構造を理解する
• HTMLメールテンプレートのレビュー
• バージョン管理にコミットする前のWYSIWYGエディタからのHTMLのクリーンアップ
• diffツールでのHTMLドキュメントの比較（フォーマットされたHTMLはよりクリーンなdiffを生成）