使い方

入力ボックスに HTML を貼り付けるか、.html ファイルを開くか、サンプルを試してください。
読みやすくインデントされたマークアップには「整形」を、コンパクトな出力には「圧縮」を選択してください。
整形するときは、2 スペース、4 スペース、タブのいずれかを選び、コメントを残すかどうかを指定してください。
結果をコピーするか、.html ファイルとしてダウンロードしてください。

仕組み

フォーマッタは、ブラウザと同じように寛容なトークナイザで HTML を読み取り、再度出力します。入力をレンダリングすることはないため、貼り付けられたコード内のスクリプトは実行されず、Web から何かが読み込まれることもありません。

Beautify では、各ブロックレベル要素（div、p、ul、li、section、table など）を、ネストの深さに応じてインデントした個別の行に配置します。テキストと a、b、em、span、code、img、br などのインライン要素は 1 行にまとめられるため、単語やリンクの間のスペースが、表示されるページを変える形で変更されることはありません。テキスト内の連続するスペースや改行は 1 つのスペースになりますが、これはブラウザがもともとそのように表示するものです。

pre、textarea、script、style 要素の内容は、空白や < や > の文字も含めて入力どおりにコピーされます。br、img、input、meta、link などの空要素には終了タグが付きません。インライン SVG 内の <path /> のような自己終了タグは自己終了のまま保持されます。

Minify では、テキスト内の空白を 1 つのスペースにまとめ、ブロック要素の前後にある空白を削除し、属性間のスペースを正規化し、「コメントを保持」がオフの場合はコメントを削除します。条件付きコメントは常に保持されます。

このツールは不正な HTML の修正、不足タグの追加、属性の並べ替え、style 要素や script 要素内の CSS や JavaScript の縮小は行いません。開いたままの要素は親要素の末尾で閉じられ、対応する開始タグがない終了タグは入力どおりに保持されます。

使用例

生成されたマークアップの確認

CMS がテンプレートを 1 行の長いコードとして出力するとします。2 スペースで Beautify すると、ナビゲーション、リスト項目、メインコンテンツがインデントされたツリーとして表示され、「Prices include <strong>VAT</strong>.」は読みやすい 1 行のままになります。

メールテンプレートの準備

コメントをオフにして HTML メールを Minify し、サイズを削減します。価格表を含む <pre> ブロックとインライン <style> は、元のまま保持されます。

構造の確認

終了タグ </div> がない場合、Beautify された出力では後続の要素が 1 段階深くインデントされて表示されるため、その要素がどこで終了すべきだったのかを簡単に確認できます。

よくある質問

整形するとページの見た目は変わりますか？

いいえ、ほとんどの場合は変わりません。ブロック要素内の空白は折りたたまれて、ブラウザが無視する改行に置き換わります。テキストとインライン要素は同じ行に維持され、pre、textarea、script、style は変更されません。通常の要素で CSS の white-space: pre に依存しているページだけが例外です。

ページ内の CSS と JavaScript も圧縮されますか？

いいえ。script と style の内容は記述どおりに保持されるため、動作が壊れることはありません。スタイルシートを別途圧縮するには CSS フォーマッターを使用してください。

不明な提供元の HTML を貼り付けても安全ですか？

はい。入力は純粋にテキストとして扱われ、ページに挿入されることはないため、スクリプトが実行されたり、画像やリンクが読み込まれたりすることはありません。

HTML を検証しますか？

いいえ。意図的に寛容な設計で、不正なマークアップを拒否せずに整形します。一致しない閉じタグは保持されるため、インデントによって見つけやすくなりますが、エラー一覧は出力されません。

プライバシー

入力した HTML はお使いのブラウザ内でのみ処理され、レンダリングやアップロードは行われません。保存されたり、分析に利用されたりすることもありません。