HTML Minifier & Beautifier

サンプル

圧縮前

<!DOCTYPE html>
<html lang="ja">
  <head>
    <!-- ページメタ情報 -->
    <title>こんにちは</title>
  </head>
  <body>
    <h1>Hello World</h1>
    <p>太字を含む <strong>テキスト</strong>。</p>
  </body>
</html>

圧縮後

<!doctype html><html lang="ja"><head>  <title>こんにちは</title> </head> <body> <h1>Hello World</h1> <p>太字を含む <strong>テキスト</strong>。</p> </body></html>

ステータス行：圧縮完了 — 234 B → 176 B (−24.8%)。コメントが消え、インデントはそれぞれ 1 つのスペースになっています。タグ間のスペースが残るのは、空白だけのテキストノードをすべて 1 つのスペースとして残すためです。<p>Hello <strong>world</strong>!</p> では <strong> の前のスペースが表示されるので、ツールはどのスペースを消してよいかを判断しません。html-minifier-terser などビルド時の圧縮ツールは collapseWhitespace などのオプションでさらに削れます。

圧縮されるもの

• タグ間の空白（inter-tag whitespace）が折りたたまれます。
• HTML コメントは削除されます — IE 条件付きコメント（<!—[if IE]>）は例外として保持されます。
• disabled="" のような boolean 属性は disabled に簡略化されます。
• テキスト内の連続した空白は 1 つのスペースにまとめます。タグ間の空白だけのテキストは削除せず 1 つのスペースにします。どの空白が表示されるかはパーサーでは判断できないためです。
• <p> や <h1> などのブロック要素の中身がテキストだけの場合、そのテキストの前後の空白を取り除きます。<strong>・<a>・<span> などのインライン要素は、見える空白なので両端に 1 つずつ残します。<strong>Note: </strong>read this. はそのままです。

そのまま保持されるもの

• <script>、<style>、<pre>、<textarea>、<code>、<samp>、<kbd> 内のコンテンツ。
• 属性値（引用符内の空白や、インラインイベントハンドラを含む）。
• <!DOCTYPE> 宣言。

HTML を手動圧縮するタイミング

モダンなビルドチェーン（Vite、Webpack、Astro、Next.js）はバンドル時に HTML を自動圧縮します。本ツールは単発の作業に向いています — CMS からエクスポートされたコード、圧縮前後のサイズ比較、手書きテンプレートの確認など。整形は日常的に使える機能で、本番環境の 1 行 HTML を貼り付けてデバッグや diff のための可読版を得られます。

制限

• インライン要素の両端の空白は、CSS で見えなくなる位置（行頭など）でも残ります。ツールは CSS を読まないため、display や white-space で空白の表示が変わるかどうかは判断できません。
• まとめるのは HTML の空白（スペース・タブ・改行・改ページ・復帰）だけです。ノーブレークスペースは残ります。Price:  10 EUR は 3 つのノーブレークスペースを保ったまま、  ではなく文字 U+00A0 として出力されます。全角スペース U+3000 も残ります。
• フラグメントで HTML パーサーが <body> の外へ移す内容は、元の順序で書き戻します。最初の要素より前の <!—[if mso]> のような条件付きコメントと、本文より前の <title>・<meta>・<link>・<style> です。通常のコメントはどこにあっても削除します。
• インラインの JavaScript と CSS はそのままコピーし、圧縮はしません。
• HTML はブラウザーの DOMParser で解析するため、不正なマークアップは修復された形で出力され（閉じタグの補完、余分なタグの削除）、doctype は <!doctype html> と書き出されます。