HTML フォーマッター

HTML を即座に整形または圧縮。インライン要素は同一行に保持し、ブロック要素は適切にインデントします。

モード:
インデント:
HTML を入力0 文字
整形結果

このツールは役に立ちましたか?

よくある質問

HTML 整形とは何をするものですか?

HTML 整形(フォーマット)は、圧縮されたりインデントが不統一な HTML を、適切な改行とインデントを付けて再整形します。div、p、h1 などのブロックレベル要素はそれぞれ独立した行になり、span、a、strong などのインライン要素は前後のコンテンツと同じ行に保持されます。

HTML 圧縮はどう役立ちますか?

圧縮は不要な空白や HTML コメントをすべて除去してファイルサイズを削減します。小さな HTML はページの読み込みを高速化します。本番環境では、圧縮した HTML の提供(gzip 圧縮と併用)は一般的なパフォーマンス最適化手法です。

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

いいえ。ブロックレベル要素間の HTML 空白は意味的に無視され、ブラウザはレイアウトに影響しません。整形はソースコードの見た目だけに影響し、ページのレンダリングには影響しません。HTML の圧縮も視覚的な変化を生じません。

一部のインライン要素が同じ行に残るのはなぜですか?

<a>、<span>、<strong>、<em> などのインライン要素はテキストコンテンツ内で流れるよう設計されています。これらを別の行に配置すると、レンダリングされたページに余分な空白が追加されます(HTML はインラインコンテキストで改行をスペースとして扱うため)。このフォーマッターはインライン要素を前後のテキストと同じ行に保持します。

JavaScript や CSS が埋め込まれた HTML を整形できますか?

フォーマッターは <script> と <style> ブロックの内容を保持しつつ、一貫したインデントで再整形します。これらのブロック内の JavaScript/CSS コードはそのまま維持されます。スクリプトやスタイルの完全な整形には、専用の JS/CSS フォーマッターをお使いください。

2 スペースと 4 スペースのインデントの違いは何ですか?

純粋にスタイルの好みです。2 スペースインデントは現代の Web 開発で一般的です(Prettier のデフォルト設定)。4 スペースインデントはより伝統的で、古いコードベースや Python などの言語でよく見られます。チームの規約に合ったものを選んでください。