HTMLを安全に整形・圧縮する方法
ビルド後のHTML、CMSが出力したページ、他の人から受け取ったテンプレート——1行に長くつながったHTMLは、構造を追うだけで時間がかかります。逆に、配信するファイルは余計な空白を落として軽くしたい場面もあります。ただしHTMLの整形には注意点があり、単純に改行を入れると表示が変わってしまうことがあります。HTML Formatter は、この落とし穴を避けながら整形と圧縮を行うツールです。行内要素は同じ行に保ち、内容の保持が必要な要素はそのまま残します。処理はすべてブラウザ内で完結します。
改行を入れると見た目が変わる理由
HTMLでは、連続する空白や改行は1つの空白として描画されます。この仕様のため、行内要素の間に改行を入れると、そこに空白があるものとして表示されてしまいます。たとえば2つのリンクを隙間なく並べていた場合、整形で改行を挟むと間に空白が入り、レイアウトが変わります。逆に、もともと空白があった場所から改行を取り除くと、今度は隙間が消えます。よくある整形ツールは、すべてのタグを機械的に改行して並べるため、この問題を起こします。このツールでは、span・a・strong・code といった行内要素を同じ行に保ち、その周囲の空白の有無も維持することで、整形前後で描画結果が変わらないようにしています。ブロック要素だけを改行の対象にする、という方針です。
中身を保持すべき要素
もう1つ注意が必要なのが、内容の空白や改行に意味がある要素です。pre は書いたとおりの空白と改行がそのまま表示される要素なので、インデントを付け直すと表示が崩れます。textarea も同様で、中の改行や空白は初期値としてそのまま扱われます。script と style は、中身がHTMLではなくJavaScriptやCSSであるため、HTMLの規則で整形すると壊れる可能性があります。特にJavaScriptでは、セミコロンの省略と改行の位置によって解釈が変わる場合があり、安易に改行を足すのは危険です。このツールでは、これら4つの要素の中身を一切変更せずそのまま出力します。整形の対象を正しく限定することが、壊さない整形の条件になります。
圧縮（Minify）で削れるもの、削れないもの
圧縮では、主にタグの間の空白と改行、そしてコメントを取り除きます。これらは描画に影響しないため安全に削れます。一方で、行内要素の間にある空白は前述のとおり意味を持つため、単純にすべて削ると表示が変わります。属性値の中の空白も当然そのまま残す必要があります。実際の効果は元のHTMLの書き方によりますが、インデントの深い整形済みHTMLであれば、数パーセントから10パーセント程度削減できることが多くなります。ただし、配信時にgzipやbrotliで圧縮している場合、繰り返しの多い空白は圧縮率が高いため、Minifyによる最終的な転送量の削減幅はそれより小さくなります。効果を確かめたい場合は、圧縮前後のサイズを実測して比較するのが確実です。
整形を使う場面
整形が役立つのは、まず既存ページの構造を調べるときです。ブラウザで取得したHTMLをそのまま読むのは大変ですが、整形すれば階層が見え、必要な要素の位置を把握できます。XPath や CSS セレクタを書く前の下準備として有効です。次に、レビューや差分確認の場面です。1行にまとまったHTMLは差分が見づらいため、整形してから比較すると変更箇所が特定できます。逆に圧縮が役立つのは、メールのHTMLテンプレートのように文字数の制約がある場合や、インラインで埋め込むスニペットを短くしたい場合です。なお、通常のWebサイトでは、ビルドツールが自動でMinifyを行う構成が一般的なので、手作業での圧縮は限られた場面で使うことになります。