HTMLを整形してインデントする方法

HTMLを読みやすく整形する

HTML Formatterは、HTMLテキストをインデント付きに整えて読みやすくしたいときに使うツールです。タグの階層を確認したいHTMLの調査や、改行のないコードを扱いやすくしたい場面に向いています。入力にはHTMLの文字列を渡し、整形するモードとインデント幅を選べます。

HTMLを整形する手順

1. HTMLの文字列を入力欄に貼り付けます。入力値は文字列である必要があります。
2. モードで beautify を選びます。モードを空欄にした場合も、空白以外の文字を含む入力では整形モードとして扱われます。minify を選ぶと、コメントと空白を限定的に取り除く処理になります。
3. インデント幅を指定します。既定値は2スペースです。空白以外の文字を含む入力では、指定値を整数に変換できない場合や、0から8の範囲外の場合に2へ戻ります。
4. 実行して結果を確認します。空欄または空白だけの入力は、空の整形済みテキストとして正常に返ります。

結果の見方と注意点

整形モードでは、HTMLの構造に沿ったインデント付きテキストを結果として確認できます。インデント幅を変えると、階層ごとの字下げ量が変わります。

minify では、コメントを削除しますが、内容が [if で始まるコメントは対象外です。また、タグ間の空白、連続する空白、前後の空白を減らす処理であり、完全な圧縮やHTMLの検証を意味しません。

空白以外の文字を含む入力が1,000,000 UTF-8バイトを超える場合は拒否されます。整形時にHTMLの解析または整形で例外が発生した場合は、成功結果ではなくHTML解析エラーとして扱われます。

使用例

1行に続けて書かれた <section><p>記事</p></section> を入力し、整形モードで実行します。

整形モードを選び、インデント幅を2スペースのまま実行します。

結果は、HTMLのタグ階層に合わせて改行とインデントが入ったテキストになります。

制限事項

• 空白以外の文字を含む入力が1,000,000 UTF-8バイトを超える場合は拒否され、HTMLの解析や整形で例外が発生した場合はHTML解析エラーになります。結果はHTMLの検証や完全な圧縮を示すものではありません。

よくある間違い

• 文字列ではない値を入力すると整形されません。HTMLを文字列として渡し、必要なら入力内容をテキスト化してから実行してください。

よくある質問

入力が空でも使えますか？

空欄または空白だけの文字列なら、空の整形済みテキストが正常に返ります。空白以外の文字を含む入力では、HTMLの文字列を渡してください。

minifyモードでは何が変わりますか？

minify を選ぶと、コメントやタグ間の空白などが限定的に取り除かれます。内容が [if で始まるコメントは削除されません。完全な圧縮ではありません。

インデント幅を指定できますか？

インデント幅は0から8の整数として扱われます。この範囲外の値や整数に変換できない値は、空白以外の文字を含む入力では2スペースに戻ります。