HTML フォーマットツール

HTML入力

インデントサイズ：

出力結果

行数: 1文字数: 0バイト数: 0

行数: 1文字数: 0

HTMLフォーマットとは？

HTMLフォーマットは、乱雑なHTMLコードを規範的で読みやすいフォーマットに整理するプロセスです。良好なコードフォーマットは可読性を向上させ、チームコラボレーションを容易にし、エラーを減らします。フォーマットには、統一インデント、適切な改行、タグ整列、属性ソートなどが含まれます。圧縮は空白、改行、コメントを削除し、ファイルサイズを削減し、ページ読み込み速度を向上させます。

使い方

HTMLコードを左側の入力ボックスに貼り付けまたは入力
インデントサイズと折り返し行長を選択
「フォーマット」をクリックしてコードを整形するか、「圧縮」をクリックしてサイズを削減
右側に整形されたコードを表示（シンタックスハイライト付き）
「コピー」をクリックしてクリップボードにコピー

オプション説明

Indent Sizeスペース2個、スペース4個、またはTabインデントを選択

Wrap Line Length指定文字数を超えた場合に自動折り返し。「No Limit」を選択すると元のまま保持

キーボードショートカット

Ctrl + Enterフォーマット
Ctrl + Shift + C結果をコピー

フォーマットのヒント

フォーマットにより壊れたネストや不審なインラインスクリプトが見つかることがありますが、HTMLをサニタイズしたり安全でないマークアップを安全にするものではありません。
Minifyは配信用コピー専用です。レビュー、差分比較、アクセシビリティチェック用に読みやすいソースマークアップは保持してください。

利用シーン

style・script ブロックを含む貼り付け HTML を整形マークアップを貼り付けてスペース2個、スペース4個、またはタブを選択します。フォーマッターはコメントを除去し、pre コンテンツを保持し、style・script ブロックを別途整形した上で HTML 構造に戻します。

小さな HTML スニペットを圧縮して埋め込み用に整形圧縮モードに切り替えてタグ間の空白を折りたたみ、コメントを除去した上で、コンパクトな HTML フラグメントをコピーやダウンロードします。CMS エクスポートの閉じタグ欠落など、パースエラーに行番号と列番号が表示されるため、元のエディタを開かずに修正できます。本番環境に埋め込む前にプロジェクトのリンターや html-validate パイプラインで確認してください。フォーマットは属性やインラインスクリプト、安全でない href 値をサニタイズしません。

レビュー用スニペットとして利用し、完全なビルド検証には使わない実装は意図的に軽量でトークンベースのため、コピーしたスニペット、メールフラグメント、CMS エクスポートに最適です。Vue や Angular、カスタム要素を含むサーバーレンダリングパーツアルを使った複雑なテンプレートは、プロジェクト固有のフォーマッターやパーサーを使用し、アクセシビリティチェックは axe-core や Lighthouse でレンダリング済み DOM に対して別途実行してください。

CMS エクスポートやメールビルダーの HTML を整形CMS、ニュースレターツール、メールビルダーからエクスポートされたマークアップを貼り付けて再インデントし、未閉じの div、誤ったネストのテーブル、不要な script タグを検出します。出力はアクセシビリティチェックと併用してください。フォーマッターは再インデントするだけで、alt テキストの欠落やコントラスト、ARIA ロールの問題は修正しません。

整形と圧縮を切り替えて差分比較同じフラグメントを整形モードと圧縮モードで切り替えて、読みやすいサイドバイサイド差分と本番圧縮済みバージョンを比較し、レイアウトや属性のリグレッションを調査します。両方の出力は同じパーサーから生成されるため、差分は空白、コメント、属性の順序によるものであり、2つのフォーマッター間の不一致ではありません。

仕組み

HTMLフォーマッターはWHATWG HTML Standardのツリー構築アルゴリズムに従います。バイト列はデコードされ（通常はmeta charsetまたはBOMによるUTF-8）、トークナイザーはデータ、RCDATA、RAWTEXT、script-data、およびセクション13.2.5で定義された複数の属性状態を順に処理し、ツリー構築段階では挿入モード状態機械（initial、before html、in head、in body、in table、in selectなど）を使用してDOMを構築します。パーサーは寛容な設計で、未閉じの`<p>`はブロック要素が続くと自動的に閉じられ、逸脱した`</tr>`は無視され、場所の誤った`<table>`はフォスターペアレンティングされます。ブラウザグレードのパーサーは`new DOMParser().parseFromString(src, 'text/html')`として公開され、Node側のツールではparse5（公式のwhatwg実装）、htmlparser2、cheerioが使用されます。再出力では、結果のツリーを走査し、要素カテゴリに従ってシリアライズします。ボイド要素（area、base、br、col、embed、hr、img、input、link、meta、source、track、wbr）はHTML5で閉じタグを持ちません（XHTMLの自己閉じ`/>`は許容されますが任意です）。ブロックレベルコンテナ（div、section、article、header、footer、nav、main、ul、ol、li、table）はdepth*indentスペースで独自の行に配置され、フレーズ/インラインコンテンツ（span、a、strong、em、code）はインラインに保たれます。CSSの`white-space: normal`が連続する空白を1文字に縮約するためです。2つの要素タイプはそのまま保持する必要があります。`<pre>`と`<textarea>`は`white-space: pre`セマンティクスを持ち、先頭の改行はパーサーによって消費されます。`<script>`と`<style>`の本文はRAWTEXTであるため、内容を再インデントするとランタイム動作が変更されてしまい、通常はJSまたはCSSサブフォーマッターに委譲されて再埋め込みされます。属性シリアライゼーションでは引用符スタイル（シングル／ダブル）を正規化し、埋め込みデリミタを名前付き文字参照`&`、`<`、`>`、`"`、数値の`'`で再エンコードします。属性順序はDOM上では意味を持たないため、フォーマッターは通常安定した順序（`id`、`class`、その後アルファベット順）を適用します。設定されたprintWidthを超えると折り返しが適用され、属性は1行に1つずつ分割され、閉じ`>`は独自の行に配置されるか（prettier-plugin-htmlの`bracketSameLine: false`）、最後の属性に接続されます。圧縮はこのプロセスを逆転させ、ブロックタグ間の空白を削除し、IE条件付き`<!--[if`を除くコメントを除去し、値が`[A-Za-z0-9._-]+`に一致する属性の引用符を除去します。いずれの操作も入力長に対してO(n)です。

パーサー：ブラウザでは`DOMParser('text/html')`によるWHATWG HTMLツリー構築（セクション13）、Nodeではparse5/htmlparser2/cheerio。挿入モード状態機械が欠落・誤配置タグとフォスターペアレンティングを処理
ボイド要素（終了タグなし）：area、base、br、col、embed、hr、img、input、link、meta、source、track、wbrの計14要素（HTML Living Standard）。XHTMLの自己閉じ`/>`は許容されるが冗長
空白保持要素：`<pre>`と`<textarea>`はCSS `white-space: pre`を持ち、先頭の改行を1つ消費。内部バイトを再インデントすると表示出力が変化
RAWTEXTコンテキスト：`<script>`と`<style>`の本文はHTMLではなく、JS/CSSサブフォーマッターに委譲されるかそのまま保持。正規表現や文字列リテラル内のraw textを再インデントするとランタイムセマンティクスが壊れる
属性正規化：引用符スタイルの選択（シングル/ダブル）、埋め込みデリミタの5つの名前付き参照（`&`、`<`、`>`、`"`、`'`）による再エンコード、DOM順序に意味がないための安定した順序の適用（id、class、その後アルファベット順）
printWidth超過時の折り返し（通常80/100/120）：属性は1行に1つずつ分割され、閉じ`>`は独自の行か最後の属性に接続。prettier-plugin-htmlの`bracketSameLine`オプションと同様
圧縮：タグ間空白の折りたたみ、コメント除去（`<!--[if IE]>`条件付きは保持）、任意の終了タグの削除（`</li>`、`</p>`の後に兄弟要素が続く場合）、`[A-Za-z0-9._-]+`に一致する属性の引用符除去。往復はO(n)

使用例

圧縮された HTML → 整形 (2スペースインデント)

入力:
<div class="card"><h2>Title</h2><p>Body text</p></div>

整形後:
<div class="card">
  <h2>Title</h2>
  <p>Body text</p>
</div>

整形 → 圧縮 (本番デプロイ向け)

ソース (412 バイト):
<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

圧縮後 (96 バイト, -77%):
<nav><ul><li><a href="/">Home</a></li><li><a href="/about">About</a></li></ul></nav>

長い属性リストを複数行に折り返し

入力:
<input type="email" id="user-email" name="email" placeholder="you@example.com" required autocomplete="email">

整形後 (80 文字超で折り返し):
<input
  type="email"
  id="user-email"
  name="email"
  placeholder="you@example.com"
  required
  autocomplete="email"
>

自己終了タグとインラインコンテンツの保持

入力:
<p>Click <a href="/docs">here</a> for help.<br><img src="icon.png" alt=""></p>

整形後 (インラインの兄弟要素は同一行に維持):
<p>
  Click <a href="/docs">here</a> for help.
  <br>
  <img src="icon.png" alt="">
</p>

よくある質問

何をフォーマットしますか？

HTML マークアップです。インデント、属性配置、空行の処理、（オプションで）指定列幅での行折り返しを行います。レンダリング結果は変わらず、ページの表示は同じまま、ソースが読みやすくなるだけです。

<pre>、<textarea>、<script> ブロックは保持されますか？

はい。pre、textarea、code、script ブロック内の空白には意味があり（レンダリングに反映されます）、フォーマッタはそれらを変更しません。他の要素は空白が正規化されます。

自己終了タグが書き換えられるのはなぜですか？

HTML5 では <br/>、<img/>、<hr/> は <br>、<img>、<hr> と等価です（HTML5 はスラッシュを必要としません）。フォーマッタは一貫したスタイルを選ぶ場合があります。XHTML/JSX/Vue テンプレートの場合は、末尾スラッシュを保持するようにフォーマッタを設定してください。

HTML を検証しますか？

いいえ。貼り付けたものをフォーマットするだけです。検証には W3C Validator やブラウザの開発者ツールを使用してください。閉じていないタグや引用符の不一致といった一般的な問題はフォーマット処理を通り抜けます。

HTML はアップロードされますか？

いいえ。フォーマットはブラウザ内で行われます。貼り付けた HTML がネットワークを越えることはありません。

HTML を圧縮（minify）できますか？

minify モードがあれば可能です。HTML のミニファイは、タグ間の空白を削除し、テキスト内の連続スペースをまとめ、省略可能な閉じタグを削除します。結果は読みにくくなりますが小さくなります。本番ビルドに有用です。

埋め込まれた CSS や JS はどうなりますか？