Utilore

HTML 整形

貼り付ければ読める形になります。タグごとに行を分け、入れ子の深さに応じて字下げします。閉じ忘れた div を見つけるのに、これより速い方法はありません。

コードはこのページから出ません。整形はブラウザ内で行われます。

使い方

  1. 最初の欄に HTML を貼り付けます。
  2. インデントを選びます。スペース 2 つ、4 つ、またはタブです。
  3. 結果をコピーします。「圧縮」を押せば再び詰められます。

知っておくと便利

あえて触らない部分

pre と textarea の中では、空白も改行もページの一部です。字下げし直せば来訪者の見え方が変わってしまいます。script と style はそもそもマークアップではありません。これらのブロックはそのまま運び、全体としてだけ位置をずらします。だから整形後のファイルも元とまったく同じように動きます。

入れ子は推測せず読み取る

img・br・input などの空要素は閉じられません。開始タグごとに字下げを深める実装は、ページを下るほど右へずれ続けます。ここではそれらを見分けて字下げを保つため、思わぬ字下げは道具の癖ではなく、本当に閉じ忘れがある合図になります。

よくある質問

HTML の妥当性は検査しますか。

しません。渡されたものを整形するだけで、マークアップは変更しません。閉じ忘れは字下げに表れますが、エラー一覧は出しません。

コードはサーバーに送られますか。

送られません。整形はページ内で行うため、社内テンプレートやログインの奥のページも手元に残ります。

ページ全体でも扱えますか。

扱えます。マークアップで 5 メガバイト程度までです。それを超えると重くなるのは整形ではなく結果の表示です。

コメントはどうなりますか。

保持され、独立した行に置かれます。条件付きコメントも残します。古いブラウザ向けのマークアップが入っているからです。

関連ツール