HTML整形ツール

HTML整形ツールの用途

HTML は読みにくい状態で手元に来ることがよくあります。CMS からエクスポートするとページ全体が1行になっていたり、テンプレートエンジンが妙な空白を残していたり、ブラウザの「ページのソースを表示」からコピーするとサーバーが送ったままの形だったりします。HTML整形ツール（HTMLフォーマッター）はインデントを組み直し、入れ子になった要素を親より1段深く配置するので、ページの構造がひと目でわかるようになります。

このページはブラウザ内で Prettier 3 を使っています。マークアップだけでなく、style タグ内の CSS と script タグ内の JavaScript も整形するので、ページ全体が一度できれいになります。

使い方

1. 左のボックスに HTML を貼り付けます。貼り付けるとすぐに整形が始まります。
2. または ファイルを開く で .html ファイルを読み込むか、サンプル で例を試します。
3. インデント を選びます：スペース2つ、スペース4つ、タブのいずれかです。
4. 行の幅 を設定します。属性が多い行や長いテキストは、この幅で折り返されます。
5. 空白の扱い を選びます：「CSS の display に従う」「無視」「厳密」の3つです。初期設定が安全な選択肢です。
6. 整形 または Ctrl+Enter を押します。コンパクトにしたいときは 圧縮 を押します。
7. コピー を押すか、ダウンロード で .html ファイルとして保存します。

一度整形すると、その後は入力に合わせて出力が更新されます。ページ内のスクリプトやスタイルのブロックに構文エラーがある場合、そのブロックは書いたまま残され、ページのほかの部分は通常どおり整形されます。エラーの場所を探すには、スクリプトを JavaScript整形ツール に貼り付けてください。行と列の位置が表示されます。

整形前と整形後

1行の HTML です。

<!DOCTYPE html><html><head><title>Shop</title></head><body><nav><a href="/">Home</a><a href="/cart">Cart</a></nav><main><h1>Welcome</h1><p>Pick a <b>product</b> to start.</p><ul><li>Tea</li><li>Coffee</li></ul></main></body></html>

スペース2つで 整形 した結果です。

<!DOCTYPE html>
<html>
  <head>
    <title>Shop</title>
  </head>
  <body>
    <nav><a href="/">Home</a><a href="/cart">Cart</a></nav>
    <main>
      <h1>Welcome</h1>
      <p>Pick a <b>product</b> to start.</p>
      <ul>
        <li>Tea</li>
        <li>Coffee</li>
      </ul>
    </main>
  </body>
</html>

nav 内の2つのリンクは1行のまま残っています。元のコードでは2つの間にスペースがなく、改行を入れるとリンクの間に目に見える隙間ができてしまうためです。これが「CSS の display に従う」モードの働きです。

インラインのブロックは、それぞれの言語のルールで整形されます。

<style>
  body {
    margin: 0;
  }
</style>
<script>
  const a = 1;
  console.log(a);
</script>

「空白の扱い」オプション

HTML では、2つのインライン要素の間にある改行はスペースとして表示されます。そのためフォーマッターは慎重に扱う必要があります。次は、同じ段落を行の幅 40 で整形した例です。

「CSS の display に従う」の場合：

<p>
  Read the <a href="/terms">terms</a>,
  then press <button>Accept</button>.
</p>

「無視」の場合：

<p>
  Read the
  <a href="/terms">terms</a>
  , then press
  <button>Accept</button>
  .
</p>

2つ目のほうが整って見えますが、ブラウザではカンマとピリオドの前にスペースが表示されてしまいます。「無視」は、目で確認するメールテンプレートや、インラインのテキストを含まない XML 風の HTML など、それが問題にならないマークアップだけに使ってください。日本語の文章では単語の間にスペースを入れないので、日本語の段落で余計なスペースが入ると特に目立ちます。

HTMLの圧縮

圧縮 は、表示内容を変えずにページを小さくします。次の入力の場合：

<div class="card">
  <!-- price -->
  <p>
    Only   <b>$5</b>   today
  </p>
</div>

結果はこうなります。

<div class="card"><p>Only <b>$5</b> today</p></div>

コメントは削除され、連続したスペースは1つになり、div や p のようなブロック要素の隣のスペースは取り除かれます。インラインの単語の間のスペースは、消すと単語同士がくっついてしまうので残ります。pre、textarea、script の中身はそのままで、style タグ内の CSS は CSS整形ツール と同じ安全なルールで圧縮されます。

制限事項

• HTML は寛容なので、閉じタグの書き忘れはエラーにならないことが多いです。<div><p>Hello</div> と入力すると、段落が自動で閉じられて <div><p>Hello</p></div> になります。出力をよく見て、書き忘れたタグがないか確認してください。
• 整形では、属性の検証、アクセシビリティのチェック、誤った入れ子の修正は行いません。それには W3C のバリデーターを使ってください。
• Handlebars や Jinja などのテンプレート構文があると、パーサーが混乱することがあります。レンダリング後の HTML を整形するか、そのテンプレート言語専用のフォーマッターを使ってください。

HTMLを整形するほかの方法

• VS Code には HTML フォーマッターが組み込まれています。「ドキュメントのフォーマット」（Windows は Shift+Alt+F、macOS は Shift+Option+F）を実行してください。Prettier 拡張機能を使うと、このページと同じ結果になります。
• コマンドライン：npx prettier --write index.html
• ブラウザの開発者ツール：「要素」パネルに整形された DOM ツリーが表示されますが、それはスクリプト実行後のページの状態で、元のソースではありません。

ページの内容を HTML ではなく Markdown で取り出したいときは、HTML Markdown 変換ツール を使ってください。ページ外のスクリプトには JavaScript整形ツール が使えます。