Untangle messy HTML into clean, indented markup

どんな HTML でも（ビルドパイプラインから出力された1行の圧縮済みコードでも）貼り付ければ、ツールが適切なインデント、1行1タグ、一貫した空白で整形し直します。インデントは2、4、8スペースから選べます。出力は、そのままエディターに貼り付けたり、コードレビューのコメントに貼り付けたりできる状態です。

整形は読みやすさのために HTML を展開します。各タグを独立した行に配置し、入れ子の子要素をインデントし、セクション間の空行を保持します。圧縮はコメントを削除し、連続する空白を詰め、改行を取り除いて、より少ないバイト数でファイルを出力します。編集や確認には整形を、本番デプロイには圧縮を使いましょう。

いいえ。内部エンジンであるjs-beautifyは、scriptブロックとstyleブロックを検出し、その内容を適切なJSまたはCSSのルールで整形します。そのため、インラインスクリプトは正しく保たれ、スタイルシートも読みやすいままです。自己終了タグ、空要素、名前空間付き属性（svg:xmlns、xlink:href）もすべて正しく処理されます。

通常のHTMLやHTMLライクなテンプレートはうまく処理できますが、純粋なJSX（波括弧の式、フラグメント、大文字で始まるコンポーネントタグ）はHTMLとして解析されるため、見た目に関する細かな問題が生じる場合があります。フレームワーク固有のコードには、お使いの方言に合わせて設定したPrettierをおすすめします。生のHTML、.htm、テンプレートファイルには、当ツールが最適です。

アップロードは一切発生しません。フォーマッターはjs-beautifyを使ってすべてブラウザ内で動作するため、社内ページのテンプレート、下書きメール、個人データを含むHTMLを、何一つデバイス外に出すことなく安全に貼り付けられます。

圧縮機能は、HTMLコメントを削除し、タグ間の連続する空白を1つのスペースにまとめ、改行を除去します。結果として得られるのは、表示は完全に同一でありながら通常10～30%小さくなったHTMLです。サーバー側のgzipと組み合わせれば、コンテンツの多いページの初期表示サイズを大幅に削減できます。

はい。「ダウンロード」をクリックすると、整形した出力をoutput.htmlとして、または圧縮した出力をoutput.min.htmlとして保存できます。ファイルはUTF-8でエンコードされているため、英語・キリル文字・CJK・右から左へ書く言語のコンテンツでも同様に問題なく扱えます。

これはブラウザのみで動作する小さなユーティリティで、ホスティングコストがゼロのため、開発者向けツールキットの一部として無料で提供しています。広告はなく、出力に対する追跡もなく、ブラウザがメモリに保持できる範囲を超えるファイルサイズの制限もありません。

整形モードでは、インデントを2・4・8スペースから選べます。エディターやコードスタイルで使っている幅を選び、結果をコピーするか output.html としてダウンロードすれば、書式をそのままプロジェクトに引き継げます。

インデントセレクター（2・4・8スペース）は「整形」モードでのみ適用されます。「最小化」は仕様上すべての空白と改行を除去するため、インデントする対象が残らないからです。インデント幅を再び反映させるには、「整形」に戻してください。

貼り付けや編集を行うと、ツールが自動的に構造チェックを実行し、閉じられていないタグ、対応の取れていないタグ、余分な閉じタグを出力パネルのすぐ下に一覧表示します — 別途ボタンを押す必要はありません。緑色の「構造上の問題は見つかりませんでした」というメッセージが、マークアップが正しく整形されていることを示します。

Prettify モードでインデントを 2 スペースに設定してください。これは最も一般的な慣習で、差分もコンパクトに保てます。その後、structural-issues パネルを確認して、閉じていないタグが残っていないかチェックします。確認が済んだら、本番に反映する前に Minify モードに切り替えて、余分な空白を取り除きます。

はい。.html、.htm、.xhtml ファイルをアップロードエリアにドラッグするか、クリックして参照すると、その内容が貼り付けたのと全く同じように入力ボックスにそのまま読み込まれます。そこから先は、マークアップがファイル由来でも貼り付け由来でも、Prettify、Minify、インデント幅、構造チェッカーはすべて同じように機能します。

はい。出力が生成されると、出力パネルと主要アクションエリアの隣に Copy ボタンが表示されます。それをクリックすると、現在の Prettify または Minify の結果が即座にクリップボードにコピーされ（確認として一瞬「Copied!」と表示されます）、中間の .html ファイルを保存することなくエディターやコードレビューのコメントに直接貼り付けられます。