HTML整形の使い方
整形したいHTMLデータを入力欄に貼り付けます。 必要に応じてインデント幅や圧縮などの設定を選びます。
整形したいHTMLデータを入力欄に貼り付けます。 必要に応じてインデント幅や圧縮などの設定を選びます。
HTML
このツールでできること
崩れたHTMLコードを正しくインデント整形できる無料ツール。圧縮されたHTMLや読みにくいコードを見やすい形式に整形します。
使い方
- 整形したいHTMLデータを入力欄に貼り付けます。
- 必要に応じてインデント幅や圧縮などの設定を選びます。
- 整形を実行して、読みやすく整ったHTMLデータやエラー内容を確認します。
- 結果をコピーしてエディタやドキュメントへ貼り付けます。
対応形式と注意点
整形後のHTMLを利用する前に内容を確認してください。タグの入れ子、必要な終了タグ、属性値の引用符などに誤りがあると、意図した表示にならない場合があります。
こんなときに便利
APIレスポンスや設定ファイル、Web制作中のコードを見やすくしたいとき、レビューや差分確認をしやすくしたいときに便利です。
HTMLを見やすく整形
入力したHTMLをタグごとに改行し、階層に合わせてインデントを付けます。改行の少ないコードや、構造を追いにくいHTMLを読みやすくしたいときに便利です。
インデントは2スペース
開始タグの内側へ入るたびに、半角スペース2つ分のインデントを追加します。終了タグでは階層を1つ戻してから出力します。
空要素の扱い
br、hr、img、input、meta、linkは、子要素を持たないタグとして扱います。これらのタグの後ろでインデントが深くなることはありません。
HTMLを圧縮
「圧縮」では、タグ同士の間にある空白を取り除き、2文字以上連続する空白文字を半角スペース1つへまとめます。整形とは反対に、コードを短くまとめたいときに使えます。
文法は修正しません： タグの閉じ忘れやHTML文法の誤りを自動修正する機能ではありません。元のHTMLに構造上の問題がある場合、その問題自体は残ります。
空白が重要なHTMLに注意
整形ではタグ前後の空白を整理し、圧縮では連続する空白をまとめます。pre内の文字や、複数の空白そのものに意味があるコードでは、処理後の内容を確認してください。
HTML整形のFAQ
HTMLのエラーも修正されますか？
いいえ。改行やインデントを整理するツールで、HTML文法を検証・修正する機能ではありません。
整形するとインデントは何文字入りますか？
階層が1つ深くなるごとに、半角スペース2つを追加します。
整形と圧縮の違いは？
整形は改行とインデントを加えて読みやすくし、圧縮は空白を減らしてHTMLを短くまとめます。