HTML整形・圧縮 - HTMLをオンラインで無料整形

どんな 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 としてダウンロードすれば、書式をそのままプロジェクトに引き継げます。

The indent selector (2, 4 or 8 spaces) only applies in Prettify mode, since Minify strips all whitespace and line breaks by design — there is nothing left to indent. Switch back to Prettify to see the indent width take effect again.

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

Use Prettify mode with 2-space indent — it's the most common convention and keeps diffs compact — then check the structural-issues panel to confirm they haven't left an unclosed tag. Once reviewed, switch to Minify mode before shipping to production to strip the extra whitespace back out.

Yes — drag an .html, .htm or .xhtml file onto the upload area, or click it to browse, and its contents load straight into the input box exactly as if you'd pasted them. From there, Prettify, Minify, indent width and the structural checker all work identically whether the markup came from a file or a paste.

Yes — once there's output, a Copy button appears next to the output panel and the primary action area. Clicking it copies the current Prettify or Minify result to your clipboard instantly (it briefly shows 'Copied!' for confirmation), so you can paste directly into your editor or a code review comment without saving an intermediate .html file.