HTML をタブまたはスペースのインデントで整形、またはコピーできる短い出力にマークアップを圧縮します。
ブラウザ内でローカルに実行入力欄は 1 つ、ボタンは 2 つです。「HTML を整形」はタグを 1 行ずつに書き直し、入れ子の要素をインデントします。幅はボタンの隣の一覧から選べます(タブ、2、4(既定)、8 スペース)。「HTML を圧縮」は同じマークアップから空白を詰めた結果を返します。
どちらのボタンも入力欄のテキストだけを処理します。押した瞬間に発生したリクエストは 0 件でした。716 KB の文書で整形は約 2.4 秒、圧縮は約 2.1 秒。もともと余分な空白のないマークアップは同じサイズで戻ります。圧縮が取り除くのは空白だけだからです。
整形は読むための処理です。タグごとに改行し、入れ子の深さに合わせてインデントし、本文中の空白をそろえます。インデントは元になかった空白を挿入するため、整形後のページは元と違って表示されることがあります。<div><span>a</span><span>b</span></div> は「ab」と表示されますが、整形後は「a b」になります。
圧縮は配布のための処理です。連続する空白はブラウザが読むのと同じく 1 つの空白になり、インライン要素の間の改行は削除されず空白として残ります。6 言語すべてで確認したところ、インラインの並び・リスト・表・入れ子ブロックのいずれでも、圧縮結果は入力と同じ表示になりました。
pre と textarea の中身は 1 バイトも変えずにそのまま渡されます。空白がレイアウトではなく文書の内容だからです。別の言語で書かれた script と style の中身も同様です。改行を詰めると // コメントの続きがコードになったり、テンプレートリテラルの内容が変わったりします。
引用符で囲まれた属性値は空白の連続も含めてそのまま保持されます。value、title、data-* 属性のいずれでも同じです。コメント本文、 や © などの実体参照、自己終了タグ、doctype も変更されません。消えるのは要素と要素の間の空白だけです。
どちらのボタンも 2 回目以降は結果が変わりません。整形済みの文書はそのまま整形され、圧縮済みの文書はそのまま圧縮されます。結果欄は色分けされたプレビューなので、テキストを取り出すには手動選択ではなく「コピー」ボタンを使うのが確実です。
整形結果では、属性を含む行が 80 文字を超えるタグは次の行に折り返されます。折り返しは属性と属性の間で起こり、引用符の中では起きません。本文は折り返されず、圧縮結果には保護された領域以外に改行がまったく含まれません。
整形も圧縮もページ内で実行されます。ボタンを押してもブラウザの外に出たリクエストは 0 件で、貼り付けたマークアップが送信されることはなく、読み込み後はオフラインでも動作します。
処理時間は入力の大きさに比例します。176 KB は整形に約 0.6 秒、圧縮に約 0.5 秒。716 KB のページでは 2.4 秒と 2.1 秒でした。圧縮は空白を詰める処理であって HTML の完全なパーサーではないため、属性の引用符を書き換えたり省略可能な終了タグを削除したりはしません。同じエンジンが JavaScript の整形も担っているので、マークアップ内の script ブロックは JavaScript として整形されます。