HTMLフォーマッター

乱雑なHTMLを整形、または本番用に圧縮します。

ブラウザ内で動作します。入力した内容はどこにも送信されません。

HTMLの整形方法

  1. HTMLを貼り付けます。
  2. インデント幅を選ぶか、圧縮をオンにします。
  3. 結果をコピーまたはダウンロードします。

整形と圧縮の比較

整形圧縮
インデント2、4、8スペースを追加削除
コメント保持削除
タグ間の空白統一削除
pre、textarea、script、style内の内容変更なし変更なし

圧縮したHTMLが役立つ場面

  • 空白とコメントがなくなると、本番ページの読み込みがわずかに速くなり、通信量も減ります。
  • 圧縮されたマークアップはソース表示で読みにくくなります。本番環境では妥当なトレードオフですが、デバッグ中は不便です。

HTMLを整形するコツ

  • 圧縮されたマークアップを目で追ってデバッグするのは大変なので、読みやすいインデント付きのコピーをソース管理に残し、デプロイするものだけを圧縮しましょう。
  • 2スペースのインデントは深くネストしたマークアップに向き、4スペースは階層の浅いシンプルなページで見やすくなります。

インデントが影響すること、しないこと

  • ブロックレベルのタグ間の空白はいずれにせよ折りたたまれるため、ブラウザの表示には一切影響しません。
  • <span>のようなインライン要素間の余白に依存したデザインの場合、見た目の間隔が変わることがあります。整形後はそうした箇所を確認してください。
  • ページのDOM構造はどちらでも変わらないため、JavaScriptの動作には影響しません。

HTMLフォーマッターのFAQ

ここでの圧縮（minify）は何をしますか？

コメントとタグ間の空白を削除します。pre、textarea、script、styleタグ内のテキストや属性には手を加えません。

整形するとページの見た目は変わりますか？

いいえ。インデントやタグ間の空白は表示に影響しないため、整形の前後でページの見た目は同じです。

壊れた、閉じられていないタグを修正しますか？

いいえ。入力されたHTMLを整形するだけです。タグの不足や不一致は先にエディタで修正してください。

完全なHTMLドキュメントも整形できますか？

はい、doctype、head、bodyを含めて整形できます。非常に長いドキュメントは整形に少し時間がかかることがあります。

HTMLを検証しますか？

いいえ。与えられたマークアップを整形または圧縮するだけで、altテキストの不足やタグの閉じ忘れなどの検証は行いません。

インラインのstyleやscriptタグも整形されますか？

整形時にはされます。周囲のマークアップと一緒に、styleタグ内のCSSやscriptタグ内のJavaScriptにもインデントが付けられます。

圧縮するとテンプレートシステムが使うコメントも削除されますか？

標準的なHTMLコメント（<!-- ... -->）は、テンプレートシステムがマーカーとして使っているものも含め、常に削除されます。コメントが他の場所で意味を持つ場合は、圧縮せず整形だけを使ってください。

完全なドキュメントでなく、断片だけを整形できますか？

はい。数タグ程度の断片もページ全体と同じように整形されます。doctype、head、bodyがなくても動作します。

関連ツール