HTML フォーマッター

HTML フォーマットについて

HTML はすべての Web ページを構成するマークアップです。圧縮は空白、コメント、冗長な構文を取り除いて本番用にファイルを縮小し、整形は再インデントしてネストされた要素を読みやすく編集しやすくします。

<pre>、<textarea>、その他いくつかの要素の内部にある空白はページの表示に意味を持つため、区別なくすべての空白を除去する単純な圧縮ツールでは見た目が壊れてしまいます。このツールは空白を意識しており、通常のタグ間の意味のない空白は詰めつつ、空白に敏感な要素は手を付けません。通常の <!-- コメント --> は削除されますが、一部の古いサイトが Internet Explorer 向けに今も使う条件付きコメントの構文、たとえば <!--[if IE]>...<![endif]--> は完全にそのまま残ります。これは本当のコメントではなく、たまたまコメント構文で書かれた指示だからです。checked="checked" のような論理属性も、短縮形にはせず書かれたとおりに残されます。

使われる場面

• 本番環境にデプロイする前にページのマークアップを縮小する
• API やサーバーサイドレンダリングが返すマークアップを整形してデバッグする
• CMS のエクスポートや他のサイトからコピーした HTML を整理する
• マークアップの差分を確認する前にインデントを統一する

よくある質問

圧縮するとページの見た目が変わりますか？
いいえ。取り除かれるのは空白、コメント、冗長な構文だけで、表示結果は変わりません。

インラインの CSS や JavaScript も圧縮されますか？
はい。<style> タグ内の CSS と <script> タグ内の JavaScript も、周囲のマークアップと一緒に圧縮されます。

ここに入力した HTML は保存されますか？
いいえ。変換はその 1 回のリクエストのためだけにサーバー上で行われ、その後は記録も保持もされません。

<pre> や <textarea> の中の空白はどうなりますか？
そのまま残ります。これらの要素は改行やインデントも含めて内容を書かれたとおりに表示するため、中の空白を詰めるとページの実際の見た目が変わってしまいます。通常のタグ間の空白は見た目に影響せず取り除いても安全なのとは対照的です。このツールは空白に敏感な要素を検出し、そこだけ意図的にスキップしてこれを避けています。