Monu Tools

HTMLフォーマッター

HTMLをブロック要素を考慮したインデントで整形するか、ミニファイします。pre・textarea・script・styleの内容は保持されます。

HTMLフォーマッターの使い方

  1. 01

    入力欄にHTMLを貼り付けます。

  2. 02

    「整形」でインデントするか、「ミニファイ」で圧縮するかを選択します。

  3. 03

    インデント幅を選び、結果をコピーします。

What the HTML formatter does

This is an HTML formatter that beautifies markup with block and inline aware indentation, or minifies it by collapsing whitespace and stripping comments. You pick the indent size when beautifying.

Beautifying indents elements according to how they nest, so the structure of a document, which elements contain which, becomes obvious. That makes hand-written or generated HTML far easier to read and debug.

Both beautify and minify run entirely in your browser, so your markup never leaves your device.

Elements it leaves untouched

It deliberately leaves the contents of pre, textarea, script and style untouched, because whitespace inside those elements is significant: reformatting them would change preformatted text, what users type, or the meaning of your code.

How minifying works

Minifying removes comments and collapses runs of whitespace, which trims the file size browsers have to download. It is most useful as a build step for production pages.

Why it keeps a space between tags

The minifier keeps a single space between tags rather than removing it entirely, because whitespace between inline elements is actually rendered, and dropping it can shift your layout. This caution avoids the subtle visual bugs aggressive minifiers can cause.

よくある質問

HTMLの整形とは何をしますか?

ネストと構造に基づいて要素をインデントします。空白が重要なpre・textarea・script・styleの内容はそのまま保持されます。

HTMLのミニファイはどう機能しますか?

コメントを削除し、連続する空白を1つのスペースに圧縮します。インライン要素間の空白はレンダリングに影響するため削除せず、タグ間の1スペースは保持されます。

HTMLはサーバーに送信されますか?

いいえ。整形もミニファイもブラウザ内で完結するため、マークアップがデバイスの外に出ることはありません。

出典

このツールを埋め込む

このツールをご自身のウェブサイトに追加できます。下のコードをコピーしてください。内容は自動的に最新の状態に保たれます。

<iframe src="https://monu.tools/embed/ja/html-formatter" width="100%" height="640" style="border:1px solid #e5e5e5;border-radius:12px;max-width:680px" loading="lazy" title="Monu Tools"></iframe>

関連ツール