HTMLフォーマッター＆整形ツール
乱雑な HTML や圧縮された HTML を、ネストの深さに応じてインデントし直して整形します。属性はそのまま保持し、<pre>、<script>、<style>、<textarea> の内容には手を加えません。すべてブラウザ内で動作します。
入力
設定
出力
このツールを使う他の方法
REST API
curl -X POST https://api.iotools.cloud/v1/tool/html-formatter-beautifier \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"htmlSource": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta ch…",
"indentation": " ",
"preserveNewlines": "",
"removeComments": ""
}'ご自身のアカウントのキーに差し替えてください。ツールのフィールドがそのままリクエストボディになります——ラッパーはありません。
AIエージェントに依頼する
Use the IOTools `html-formatter-beautifier` tool (HTML Formatter & Beautifier) on this input:
YOUR_INPUT_HEREIOTools MCPサーバーに接続された任意のエージェントにこれを貼り付け、入力内容を追加してください。
埋め込みウィジェット
<iframe
src="https://iotools.cloud/embed/html-formatter-beautifier/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="HTMLフォーマッター＆整形ツール — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>ご自身のページに貼り付けるだけ——無料、キー不要、リンクを掲載するだけです。
| API/MCP 1回あたりの費用 | 5クレジットから |
|---|---|
| クレジットが足りませんか? | 料金を見る |
次の方法でも利用可能
ガイド
圧縮された HTML、機械が生成した HTML、インデントが乱れた HTML を貼り付けるだけで、ネストごとに 1 階層ずつ整ったインデントで返します。属性には手を加えず、再整形すべきでないタグはそのまま残します。圧縮されたページのソースを読むとき、WYSIWYG エディタからコピーしたマークアップを整理するとき、コミット前にテンプレートを整えるときに便利です。
使い方
- HTML を入力欄に貼り付けるか、
.html/.htmファイルをアップロードします。 - インデントを選びます：スペース 2 つ、スペース 4 つ、またはタブ。
- 必要に応じて 既存の空行を残す（セクション間の意図的な空白を保持）または HTML コメントを削除（
<!-- -->で囲まれた部分をすべて削除）をオンにします。 - 結果をコピーするか、
formatted.htmlとしてダウンロードします。
整形は入力中に自動で行われます。実行ボタンはありません。
1 行にまとめる判断の仕組み
中身がすべてテキストであるタグ、または <a>、<span>、<strong>、<em>、<img> などのインライン要素とテキストが混在するタグは、1 行に収まります。<li>項目 1</li> や <p>こんにちは、<strong>世界</strong>！</p> は、途中にネストしたタグがあるだけで 5 行に分割されることはありません。ブロック要素（<div>、<ul>、<section> など）を子に持つタグは改行されます。開始タグ、各子要素、終了タグがそれぞれ独立した行になり、親より 1 階層深くインデントされます。
<br>、<hr>、<img>、<input>、<meta>、<link>、<area>、<base>、<col>、<embed>、<source>、<track>、<wbr> などの void 要素には、終了タグが付くことも、持てない「子要素」のための偽のインデントが付くこともありません。自己終了構文（<img />）は書いたとおりに保持されます。
決して変更しないもの
<pre>、<script>、<style>、<textarea>の内容はバイト単位でそのまま出力されます。 これらの中の空白は表示や実行に影響する内容の一部です。<pre>ブロックを整形すると表示されるテキストが変わり、<script>の本体を再インデントするとテンプレートリテラルやインデントに依存する文字列があった場合に動作が変わることがあります。ツールが再インデントするのは開始タグだけで、そこから対応する終了タグまでの内容は書いたとおりに残します。- 属性の順序変更、書き換え、再整形は一切行いません。 タグで使われていた引用符や空白はそのまま残り、変わるのはタグの位置とインデントだけです。
- 不正な HTML でフォーマッタがクラッシュすることはありません。 対応する開始タグのない終了タグは、出力の残りを壊さないよう破棄されるため、完全なドキュメントではなく断片を貼り付けても問題なく動作します。
閉じられていないタグを修正したり、マークアップを検証したりしないのはなぜですか？
このツールは検証ツールではなく整形ツールです。解析できる構造を再インデントし、本当に壊れているマークアップは元の意図にできるだけ近いまま残します。タグの欠落、ネストの不整合、無効な属性を確認したい場合は、結果を後から HTML バリデーター にかけてください。
圧縮や削除はしますか？
いいえ。インデントは追加されるだけで削除されず、タグ、属性、テキストも削除されません（コメントは、そのオプションをオンにした場合にのみ削除されます）。ページのバイトサイズを小さくしたい場合は、HTML ミニファイア を使ってください。
入力した HTML はどこかにアップロードされますか？
いいえ。フォーマッタはすべてブラウザ内で動作します。マークアップがサーバーに送信されたり、記録されたり、保存されたりすることはなく、ファイルをアップロードしても、ページ内でローカルに読み込まれるだけです。オフラインでも動作します。