本文へスキップ
HTM

HTMLフォーマッタ

空白の意味を壊さずにHTMLを整形・圧縮。

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>toco.tools Sample</title> <style> .card { color: #333; padding: 8px; } </style> </head> <body> <!-- header --> <div class="card"> <h1>Hello toco.tools</h1> <p>Format HTML without breaking the <a href="https://example.com">space before this link</a>.</p> <pre>function greet() { return "hi"; }</pre> <script> console.log("raw text is never re-parsed as HTML"); </script> </div> </body> </html>

HTMLの空白は意味を持つことがあるため、DOMParserは使わずタグを認識する専用のパーサで処理しています。<pre>・<textarea>の中身はバイト単位で保持し、<script>・<style>の中身はHTMLとして解釈しません。インライン要素（<a>・<span>等）を含む段落は1行のまま整形し、意図しない空白の増減を防ぎます。すべての処理はブラウザ内で完結し、外部へ送信されません。

HTMLフォーマッタについて

HTMLフォーマッタとは、タグの入れ子が分かるようインデントを整えたり（整形）、配信サイズを減らすために不要な空白を削ったり（圧縮）するツールです。ここで難しいのは「HTMLの空白は常に無意味ではない」という点です。ブロック要素同士の間の改行やインデントは見た目に影響しませんが、`<pre>`や`<textarea>`の中身の空白はそのまま表示・入力値に反映され、`<p>text <a>link</a></p>`のようにインライン要素の前後にある1個の空白は単語間の区切りとしてレンダリングに現れます。ここを区別せずに機械的にインデントを振り直すツールは、意図せずページの見た目や入力初期値を変えてしまいます。 toco.toolsのHTMLフォーマッタは`DOMParser`を使いません。`DOMParser`はhtml/head/bodyの補完や不正な位置のノードの移動などドキュメントを正規化してしまうため、出力が「あなたが書いた文書」ではなくなってしまうからです。代わりに、引用符付き属性値の中の`>`や`<script>`/`<style>`内の文字列に含まれる`<`をタグと誤認しない専用の文字走査パーサでトークン化し、要素の木構造を組み立ててから出力します。`<pre>`・`<textarea>`の中身は整形・圧縮のどちらでも1バイトも変更せず、`<script>`・`<style>`の中身はHTMLとして解釈しません（整形時はブロックごとインデントをシフトし、圧縮時は前後の空行だけを削ります）。`a`・`span`・`strong`などインライン要素だけで構成されるブロックの内容は1行にまとめ、改行を挟むことで生じる余計な空白を防ぎます。 圧縮で行っているのは、通常コメントの除去（条件付きコメント`<!--[if`とバンコメント`<!--!`は保持）・ブロックレベルタグ同士の間の空白の完全な除去・テキスト内の連続空白の1個への圧縮（0個にはしない）・文書全体の先頭と末尾の空白除去です。省略可能な閉じタグの補完や除去、属性値の引用符の除去、属性の並べ替えや重複排除は行いません。これらは元の構造を書き換えることになり、「壊さない」という立場に反するためあえて実装していません。閉じタグの対応が取れていない不正なマークアップも、クラッシュしたり内容を消し去ったりせず、可能な範囲で妥当な結果を返します。すべての処理はブラウザ内のJavaScriptで完結し、外部へは一切送信されません。

使い方

  1. HTMLを貼り付ける
  2. 整形または圧縮を選ぶ
  3. 結果をコピー

よくある質問（FAQ）

他のHTML整形ツールと何が違いますか？

DOMParserを使わず、属性値やscript/styleの中身を正しく認識する専用パーサで処理しています。そのため、DOMParserのようにhtml/head/bodyを勝手に補完したり不正なマークアップを消したりせず、あなたが書いた文書のままインデントだけを整えます。

<pre>や<textarea>の中の空白は保持されますか？

はい。整形・圧縮のどちらのモードでも、<pre>と<textarea>の中身は1バイトも変更しません。表示・入力初期値に影響する空白を壊さないためです。

<a>や<span>などのインライン要素は改行で分断されますか？

されません。インライン要素だけで構成される内容は1行にまとめて出力します。改行を挟むとインライン要素の前後に意図しない空白（見た目上の隙間）が生まれてしまうためです。

省略可能な閉じタグの補完や属性の並べ替えはしますか？

しません。省略された閉じタグを補ったり、属性値の引用符を外したり、属性を並べ替え・重複排除したりする最適化は、元のマークアップの構造を書き換えることになるため、安全性を優先してあえて実装していません。

入力したHTMLは外部に送信されますか？

いいえ。整形・圧縮の処理はすべてブラウザ内のJavaScriptで完結し、toco.toolsのサーバーを含め、どこにも送信されません。