ページ全体でなく断片を貼ってもいいですか。

はい、むしろそれが普通の使い方です。入力を文書パーサーに通すツールなら、単独の表の行をhtml・head・bodyで包み、あなたが書いていないものを返してきます。このツールは入力を文字列として扱うので、断片は断片のままです。

インラインのCSSやJavaScriptに手を入れますか。

手を入れません。scriptとstyleの中身は、書かれたとおりにそのまま写します。あれは独自の規則を持つ別の言語です。迷子の波かっこや、閉じタグを含むテンプレート文字列は、HTMLのつもりで編集すれば壊れます。だからこのツールは編集を試みません。

出力がまだ1行のまま長いのはなぜですか。

おそらく中身がpre・textarea・script・styleの中にあります。これらは一字一句そのまま残します。長い属性の並びもタグの行に留めます。タグの内部で改行するのは文法上は問題ありませんが、構造が読みやすくなるわけでもないのに差分だけが騒がしくなるからです。

私のHTMLはどこかへ送られますか。

送られません。すべてページ内で動くので、送信も保存もありません。社内プロジェクトのマークアップには、内部URLやdata属性に埋まった鍵、公開するつもりのなかったコメントが紛れがちです。字下げのために、そのどれ一つとして手元の機械を出る必要はありません。

HTML整形とminify - 読みやすくも小さくも

ツール / / 開発者ツール / 整形ツール / HTML整形

HTMLの整形とminify

字下げ

あなたのHTML

<div class="card"><h2>Title</h2><p>Text <b>bold</b></p></div>

このツールでできること

同じテキストに対する正反対の2つの仕事です。整形は改行と字下げを足して、入れ子を人が追えるようにします。minifyはブラウザーに不要なものをすべて削ります。ここではどちらも、あなたが入力した文字そのものを扱い、組み直した文書を扱いません。出てくるのは今もあなたのマークアップです。

使い方

1 HTMLを貼り付けます。ページ全体でも断片でも構いません。
2 字下げを選び、整形かminifyを押します。
3 結果をコピーするか、もう一方のボタンに通して見比べます。

空白はいつも余計とは限らない

インライン要素どうしの間では、空白1つが見える文字です。消せば「one two」が「onetwo」になります。ブロック要素の間では同じ空白に意味がありません。ここのminifyは字下げは落としますが、実際に働いている区切りの空白は残します。

preとtextareaに触れない理由

この中では、空白も改行もすべて読者が目にする内容です。コードブロックを字下げし直せば、表示される中身が黙って変わります。textareaを詰めれば、フォームが送る値が変わります。scriptとstyleも同じで、中身は別の言語なのでそのまま通します。

整えるだけで、直しはしない

ブラウザーのパーサーの上に作られたツールは、壊れたマークアップを黙って直します。タグを閉じ、迷子のタグを捨て、仕様が求める位置へ要素を移します。デバッグ中はそれが困ることが多いのです。追っているバグこそが、直されてしまったものかもしれません。このツールはテキストを整え直すだけで、間違いは見える場所に残します。

HTMLのminifyは小さな勝ち

ページから空白を削っても、たいてい数パーセントの節約にとどまります。しかもサーバー側のgzipが、その大半をすでに圧縮しているはずです。本当に重いのは画像、フォント、スクリプトです。HTMLをminifyするのは、テンプレート生成器が読めない出力を残したときであって、ページが劇的に速くなるからではありません。