01
元の入力を残す
例文や消去は文字数を示す確認画面を経て適用します。一度なら入力と結果をまとめて元に戻せます。
- 例文にはインラインの空白とpreの改行を入れています。
HTMLツール
HTMLコード整形入れ子を読み解く
自動整形は入力停止から350ミリ秒後。圧縮は手動で行い、構造の通知から元の行へ戻れます。
HTMLコード整形
HTMLソース
結果
HTMLはこのタブ内で処理します。静的プレビューはスクリプトと外部通信を遮断します。
HTMLを貼り付けるかサンプルを読み込んでください。
CMSが出力した一行のHTMLから崩れた箇所を探すとき、タグの入れ子が見えないと時間がかかります。HTMLコード整形は構造的な境界だけを整え、インラインの語間や保護対象の内容をそのまま残します。
解析後のタグ一覧から元の行へ戻れます。警告は調査の手掛かりとして使い、最終的な規格適合は専用の検証器で確認してください。
HTMLコード整形を使う理由
並び替えずに階層と位置を読む
HTMLコード整形は構造タグを段落状に展開し、タグ一覧から元の行へ移動できます。pre・textarea・script・styleの中身は触りません。
プレビューは選んだときだけ
HTMLコード整形の静的プレビューは独立した隔離フレームで開きます。スクリプト、フォーム、外部リソースの読み込みを禁止します。
持ち出す前に確かめる三点
02
更新タイミングを選ぶ
既定では入力が350ミリ秒止まるとHTML整形を自動実行します。オフならCtrl/Cmd+Enterで実行し、圧縮は常に明示的に実行します。
- 字下げ設定を変えると古い結果は無効になり、書き出せません。
03
診断の位置を確認する
タグ一覧や警告を選ぶと元の行・列へ移動します。バイト数と静的プレビューも確認できます。
- 警告ゼロはHTML規格に適合したという判定ではありません。
整形、圧縮、構造の手掛かり
控えめな字下げ
構造タグ間だけ改行し、インライン文字や属性の順序は変えません。
明示的な圧縮
元の入力からHTML圧縮の結果を作り、コメントと埋め込みコードを残してUTF-8のバイト差を示します。
元行へ戻れるタグ一覧
HTML5の解析後の階層を示し、暗黙に補われた要素も区別します。
隔離した静的表示
結果が最新のときだけ開けるプレビューで、能動的な要素と外部通信を遮断します。
結果を読むときの境界
- 規格検証ではない
- HTMLコード整形に含まれるHTML構文チェックは、位置を特定できる解析エラーと閉じ忘れの疑いだけを示します。すべての内容モデルやアクセシビリティ規則は判定しません。
- 空白が表示に影響する場合
- インライン間と保護対象の空白は残しますが、CSSのwhite-space指定などにより構造間の空白も意味を持つことがあります。
- テンプレートは修復しない
- Vue、JSX、Liquidの構文を専用解析せず、ブラウザーが補ったタグも元のコードに書き戻しません。
- 付加的な圧縮はしない
- URLの取得、ファイルの一括処理、コメント削除、属性並べ替え、埋め込みCSSやJSの圧縮は対象外です。
HTMLコード整形のよくある質問
HTMLを整形すると表示は変わりますか？
通常は構造タグ間の配置だけが変わります。ただしCSSの空白指定によって差が出るため、公開前に実際のページで確認してください。
圧縮したHTMLを整形できますか？
はい。一行になった構造タグを読みやすく展開します。インラインの語間やpreなどの内容は保持します。
整形時にコメントを削除できますか？
いいえ。通常のコメントは保持します。条件付き記述やビルド指示を誤って消さないためです。
タグの大文字と小文字を統一できますか？
いいえ。タグ名や属性名を書き換えず、元の表記を残します。専用の変換はこのページの対象外です。
HTMLの構文エラーも確認できますか？
位置付きの解析エラーや閉じ忘れの疑いを示します。警告がなくても規格適合を保証しないので、完全な検証には専用ツールを使ってください。
予期しない結果が出ましたか？