HTML Formatter
HTML Formatter — ブラウザで動作します。入力は保存されません。
HTMLインデント
タグを基準に大まかなインデントを適用します。
使い方
- HTML欄に1行に詰まったマークアップやインデントが崩れた断片を貼ります。
- 整形を押して、タグ基準で2スペースずつインデントした結果を確認します。
- 空要素とコメントは深さを上げず、同じ行レベルに合わせます。
- 結果をコピーで整ったマークアップを取ります。
- リセットで入力と結果を一緒に空にします。
ポイント
HTMLフォーマッタはタグ間をトークンに分け、開始タグでインデントを増やし終了タグで減らします。画像・改行・入力のような空要素と自己閉じタグ、コメント・宣言は子がないと見て深さを上げません。完全なHTMLパーサではないので、重なりのおかしいタグもだいたい行を合わせるだけです。圧縮されたコンポーネント断片を読みやすく広げるときに便利です。テキストノードは前後空白を除いて現在の深さに合わせるので、タグ間の説明文も1行に揃います。
タグ間の不要な空白は一度くっつけてから再分割するので、インライン要素の間の意図した空白が減ることがあります。属性の並べ替えや引用符の統一はせず、インデントだけ扱います。ブラウザ内だけで変換し、マークアップをサーバーに送りません。Excelから作った表マークアップを読みやすく整えたり、検査前に構造を目で確認する前段階に向きます。整形結果をエディタに貼ると階層が一目で分かり、プレビューともつなぎやすいです。
例
入力に <div><p>hello</p></div> を入れて整形すると、開始divの次の行にpが2スペース入り、テキストhelloがその次の深さに置かれます。画像のように閉じないタグを入れても、次の兄弟の深さが不要に上がりません。結果コピーで整ったマークアップをエディタに貼ればよいです。
関連: XMLフォーマッタ · HTML検査器 · HTMLエディタ
よくある質問
HTMLフォーマッタは文法が間違ったコードもインデントしますか？
はい。エラーで止めずタグトークン基準で行だけ合わせるので、閉じていない断片も結果が出ます。
imgのような空タグはどう扱われますか？
空要素と自己閉じタグ、コメントは子がないと見て、次の兄弟の深さを上げません。
インライン空白が整形後に消えることがありますか？
タグ間空白を先にくっつけるため、インライン要素の間の空欄が減ることがあります。レイアウトが敏感なら結果をもう一度確認してください。
属性をアルファベット順に並べますか？
しません。インデントと改行だけ入れ、属性の順・値はそのままです。
マークアップはサーバーに送られますか？
いいえ。整形とコピーはブラウザ内だけです。アップロードボタンもありません。
結果コピーはどの欄をコピーしますか？
読み取り専用の結果欄の整ったマークアップだけです。入力が空で整形前ならコピーする内容がありません。
最終確認日: 2026-09-04