やの中身がインデントされないのはなぜですか？

との中の空白は書いたとおりに表示され、やの中のインデントを変えるとコードや文字列が変わる可能性があるため、これらのブロックはそのまま保持します。

HTML整形 - 無料オンラインツール

機能

HTML タグを自動インデント

インデントをカスタマイズ

コメントを残す/削除

シンタックスハイライト

使い方

1. 左側の入力ボックスにHTMLマークアップを貼り付けます。

2. 「整形」をクリックして適切なインデントで見やすくします。

3. 「圧縮」をクリックして空白を除去します。

4. 右側の結果をコピーまたはダウンロードします。

このツールについて

ブラウザー、CMS、圧縮されたビルドからコピーした HTML は、読めない1行になっていることがよくあります。このフォーマッターは入れ子になった各要素を親より1段深くインデントし直すので、構造、閉じタグの抜け、置き場所を間違えた要素が一目で分かります。<br>、<img>、<input> のように閉じタグを持たない空要素を認識し、空白に意味がある <pre>、<textarea>、<script>、<style> の中身はそのまま残します。スペース2つ・スペース4つ・タブから選び、結果をコピーまたはダウンロードできます。「圧縮」はその逆で、本番向けにコメントを削除しタグ間の空白を詰めてページを軽くします。

よくある質問

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

ほとんどの場合変わりません。ブロック要素の間の空白はブラウザーに無視されます。ただし、並んだ2つのリンクや span のようなインライン要素の間では、改行の有無でスペース1つ分の間隔が変わることがあるので、インライン要素の多いマークアップは整形後に確認してください。

<pre> や <script> の中身がインデントされないのはなぜですか？

<pre> と <textarea> の中の空白は書いたとおりに表示され、<script> や <style> の中のインデントを変えるとコードや文字列が変わる可能性があるため、これらのブロックはそのまま保持します。

無効な HTML を修正してくれますか？

マークアップの修正や検証は行いません。受け取った内容をインデントするだけですが、それによって閉じ忘れたタグなどの問題が見えやすくなります。仕様への適合性は W3C のバリデーターで確認してください。

「圧縮」では何が削除されますか？

HTML コメントとタグ間の不要な空白を削除します。<pre> 内のテキストなど空白に依存する内容は残ります。本番サイトでは、HTML の圧縮だけよりもサーバー側の gzip や Brotli 圧縮のほうが大きく削減できます。

Vue や Angular などのテンプレート構文も整形できますか？

{{ name }} のようなテンプレート式はテキストとして残り、コンポーネントのタグは通常の要素と同様にインデントされます。属性値の中に山括弧を含む複雑なディレクティブは通常の HTML フォーマッターを混乱させることがあるので、出力を確認してください。

HTML整形＆ビューティファイア

機能

使い方

このツールについて

よくある質問

関連ツール