HTML Formatter & Minifier

How to Use the HTML Formatter & Minifier

This free online HTML formatter beautifies messy or minified HTML with consistent indentation (2 or 4 spaces), and minifies HTML by stripping line breaks, indentation, and optional comments. Paste your markup, click "Format" (整形) or "Minify" (圧縮), and copy the result. Everything runs in your browser — no markup is uploaded anywhere.

Features

• Token-based formatting with selectable 2-space or 4-space indentation
• Void elements (br, img, input, meta, link, hr, etc.) handled per the HTML standard — no closing tags, no extra indent levels
• Content inside <pre>, <textarea>, <script> and <style> is preserved byte-for-byte
• Comments and <!DOCTYPE> declarations are kept; minification can optionally drop comments while keeping conditional comments
• Size statistics after minification so you can see the exact byte reduction

What is HTML formatting and why minify?

Formatting (pretty-printing) restructures markup so that nesting depth is visible at a glance: one tag per line, children indented one level deeper. It makes code reviews, debugging, and diffs dramatically easier. Minification is the inverse operation for production: whitespace used purely for readability is removed, reducing the bytes sent over the network. Typical hand-written pages shrink by 5–20% before gzip. If you want to see how the HTML actually renders rather than how it reads, use our HTML Preview tool instead — this page focuses on source-code formatting and size reduction.

HTML Formatter & Minifierの使い方

このツールはHTMLソースコードの「整形」と「圧縮」に特化しています。整形は、1行に詰め込まれたHTMLやインデントがバラバラなHTMLを、選択したインデント幅(2または4スペース)で階層構造が読み取れる形に揃えます。圧縮は逆に、可読性のためだけに存在する改行・インデントを取り除き、転送サイズを削減します。表示確認(レンダリング結果のプレビュー)が目的の場合はHTML Previewを使ってください。本ページはあくまでソースコードそのものを扱うツールです。

整形器はトークンベースで動作し、HTML仕様に沿って次の点を考慮しています: void要素(<br>、<img>、<input>、<meta>、<link>、<hr> など)は閉じタグを持たないためインデントを深くしない。<pre> と <textarea> の内側は空白が表示に直結するため一切変更しない(<script> / <style> の中身も保持)。コメント <!-- --> と <!DOCTYPE> は削除せず保持する。

1. 本番ページのソースを読める形に戻す

CMSやビルドツールが出力するHTMLは1行に圧縮されていることが多く、「どのdivがどこで閉じているか」を目で追うのはほぼ不可能です。ブラウザの「ページのソースを表示」からコピーして本ツールで整形すれば、ネスト構造が一目で分かり、構造のデバッグや競合サイトのマークアップ調査がはかどります。

2. チーム内のインデント統一・コードレビュー前の整理

複数人で編集したテンプレートはタブ・2スペース・4スペースが混在しがちです。レビューに出す前に本ツールで整形しておくと、差分がインデント変更で埋もれることを防げます。エディタの設定が揃っていない環境(メール添付のHTMLや古い資産の改修など)で特に有効です。

3. メールHTML・LPの転送サイズ削減

HTMLメールや広告LPは1バイトでも軽い方が有利です。圧縮を実行すると改行・インデント・(オプションで)コメントが除去され、削減率が表示されます。gzip配信と併用しても元のバイト数が減る分は確実に効きます。CSSやJavaScriptも合わせて削減する場合はCSS MinifierとJS Minifierを使ってください。

制限事項

• 複雑な条件付きコメント(ダウンレベル表示型 <!--[if !IE]><!--> 形式など)や、<script> 内に文字列として埋め込まれたHTMLの扱いは完全には保証しません。script内に </script> という文字列を書く場合は <\/script> とエスケープしてください。
• 整形時、インライン要素間の空白が改行に置き換わるため、文字どうしの密着(例: <b>太字</b>!)が表示上1スペース分変わる場合があります。
• 構文チェッカーではありません。閉じタグ不足などの壊れたHTMLもエラーにせず、そのままの構造で整形します。

よくあるエラーと対処 / Common Errors and Fixes

HTML整形・圧縮で起こりやすい「結果がおかしい」症状と原因をまとめました。多くは入力HTML側の構文問題です。

Common symptoms when formatting or minifying HTML, and how to fix them. Most are caused by syntax issues in the input markup.

言語別コード例 / Code Examples by Language

HTMLの整形・圧縮をビルドパイプラインやスクリプトで再現するための最小サンプルです。

Minimal snippets to format and minify HTML programmatically.

JavaScript / Node.js

// 整形 / Format with Prettier
import * as prettier from "prettier";
const pretty = await prettier.format(html, {
  parser: "html",
  tabWidth: 2,
});

// 圧縮 / Minify with html-minifier-terser
import { minify } from "html-minifier-terser";
const min = await minify(html, {
  collapseWhitespace: true,
  removeComments: true,
});

Python

from bs4 import BeautifulSoup

# 整形 / Pretty-print (BeautifulSoup4)
soup = BeautifulSoup(html, "html.parser")
pretty = soup.prettify()

# 簡易圧縮 / Naive minify (タグ間の空白除去)
import re
minified = re.sub(r">\s+<", "><", html).strip()

Go

import (
    "bytes"
    "strings"
    "golang.org/x/net/html"
)

// パースして正規化出力 / Parse and re-serialize
doc, err := html.Parse(strings.NewReader(src))
if err != nil {
    // 不正なHTML / invalid HTML
}
var buf bytes.Buffer
html.Render(&buf, doc) // 構造の正規化(インデントは付かない)

Shell

# HTML Tidy で整形 / Format with HTML Tidy
tidy -indent -wrap 120 -quiet input.html > output.html

# Prettier CLI で整形 / Format with Prettier CLI
npx prettier --parser html --write index.html

Before / After 実例 / Before & After

例1: 1行に圧縮されたHTMLを可読化 / Pretty-print single-line HTML

<!DOCTYPE html><html><head><title>Demo</title></head><body><ul><li>One</li><li>Two</li></ul></body></html>

↓ 整形(2スペース)

<!DOCTYPE html>
<html>
  <head>
    <title>Demo</title>
  </head>
  <body>
    <ul>
      <li>One</li>
      <li>Two</li>
    </ul>
  </body>
</html>

例2: void要素と<pre>を含むHTML / Void elements and <pre> preserved

<div><img src="a.png" alt=""><br><pre>  keep
    this   spacing</pre></div>

↓ 整形(2スペース)。<img> / <br> はインデントを深くせず、<pre> 内は無加工

<div>
  <img src="a.png" alt="">
  <br>
  <pre>  keep
    this   spacing</pre>
</div>

例3: 整形済みHTMLをminifyしてサイズ削減 / Minify formatted HTML

<nav>
  <!-- main navigation -->
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/tools/">Tools</a></li>
  </ul>
</nav>

↓ 圧縮(コメント削除ON)。この例では約4割のバイト数削減

<nav><ul><li><a href="/">Home</a></li><li><a href="/tools/">Tools</a></li></ul></nav>

Why browser-only? / なぜブラウザ完結か

HTML source code is rarely "just markup." A page dumped from a staging environment can contain session tokens in data attributes, internal API endpoints in form actions, unreleased product names, or inline scripts with credentials that were never meant to leave the company network. Pasting that into a server-side formatter transmits all of it to a third party, regardless of what the privacy policy promises. This tool takes a different approach: the tokenizer, formatter, and minifier are plain JavaScript running entirely in your browser tab. Nothing is uploaded, logged, or cached remotely — there is no server endpoint to send it to. You can confirm this yourself: open DevTools, switch to the Network tab, format or minify any input, and watch the tab stay empty. When the input is sensitive production markup, browser-only processing is not a convenience feature; it is the only acceptable design.

ステージング環境から取り出したHTMLには、data属性内のセッショントークン、フォームの送信先になっている社内APIのURL、未公開の製品名などが含まれていることがあります。サーバー処理型の整形ツールに貼り付ければ、それら全てが第三者へ送信されます。本ツールはトークン解析・整形・圧縮の全工程をブラウザ内のJavaScriptだけで実行し、ネットワーク通信を一切行いません。DevToolsのNetworkタブが空のままであることで、誰でもその場で検証できます。