piapia123
ja

HTML の整形と圧縮

整形

処理はすべてブラウザ内で完結します。データは送信されません

入力
出力

1行に圧縮された HTML をインデントされた構造へ展開します。「タグを見たら改行する」方式とは違い、ここではテキストの中身を見ます。要素の中に文字が現れたら、その部分木全体をインラインのまま保ちます —— HTML では改行が実際の空白になるからです。<p>a<b>x</b> の中の <b> を次の行に移すと、レンダリング結果は「ax」から「a x」に変わってしまいます。同じ理由で、元のテキストに空白がない場所に空白を勝手に補うこともありません。

機能

  • タグの階層ごとにインデント。インデントはスペース 2 個 / 4 個 / タブから選べます
  • 空要素(br、img、meta、input、link など)を認識し、後続の内容が1段深くインデントされるのを防ぎます
  • テキストとインライン要素は同じ行のまま。空白は元のテキストにあった位置にだけ補います
  • script・style・pre・textarea の中身はそのまま保持し、終了タグは内容に接して空白を挟みません
  • コメントと DOCTYPE はそれぞれ別の行になり、タグの内部の連続した空白は半角スペース1つにまとまります
  • 属性値の中の空白はそのまま保持し、属性値の中の > がタグを切ることはありません
  • 圧縮モードはタグの間の空白とコメントを削除します
  • 構文チェックはしません:タグが閉じていない場合もエラーにせず、できる範囲でインデントします

使い方

  1. HTML を入力欄に貼り付けます
  2. 処理方法とインデントを選びます
  3. Ctrl/⌘ + Enter を押すか「実行」をクリックします
  4. 「コピー」で結果を取り出せます

よくある質問

圧縮したらページから空白が消えたのはなぜですか?
圧縮はタグの間の空白を削除します。多くの場合は影響ありませんが、インライン要素の間の空白はレンダリング時に実際の隙間になります(<span>a</span> <span>b</span> は「ab」と繋がって表示されます)。そこを保ちたいときは整形モードをお使いください。
テキストが複数行に分割されないのはなぜですか?
行を分けると実際の空白が挿入され、レンダリング結果が変わってしまうからです。ですから改行は構造上の位置にだけ入れ、テキストの中身はその場に残します。
script や pre の中身は並べ替えられますか?
いいえ。これらの要素の中身は全体をそのまま運び、終了タグは内容に接して書きます。「見た目を整える」ために中のコードや空白を変えることはありません。
HTML は送信されますか?
いいえ。処理はすべてブラウザのメモリ内で完結し、ページはリクエストを一切送りません。オフラインでも使えます。

関連ツール