HTML整形
HTML文書を、表示を変えずにインデントします。すべてブラウザ内で処理されます。
すべてブラウザ内で動作します。アップロード、記録、保存は一切行いません。
圧縮された、またはインデントの崩れたページを貼り付けて、きちんと読める形にしましょう。整形はブラウザ内で行われ、出てくる文書は入ってきた文書とまったく同じように表示されます。
仕組み
文書をツリーとして読み込み（空要素、scriptとstyleの中身、HTMLの省略可能な終了タグはここで解決されます）、新しいインデントで書き直します。
どこで改行するかは、見た目のよさではなく、ブラウザが空白をどう読むかで決まります。連続する空白は1つのスペースとして表示されるので、スペースを改行とインデントに置き換えても何も変わりません。しかし、空白のなかったところに空白を作ると変わります。隣り合う2つのインライン要素が、スペースで隔てられた2つの要素になってしまうのです。
そのため、空白を追加・削除するのは、ブロックボックスの間と、ブロックボックスの端だけです。そこではブラウザが空白を表示しないからです。この例外があるから圧縮されたページを展開でき、またインライン要素の並びがもとの行にとどまるのもそのためです。
整形ツールが聞いたこともないタグはインラインとして扱います。それが空白を追加しない答えであり、したがってページを変えることのない答えだからです。
例
| ケース | 入力 | 結果 |
|---|---|---|
| インデントのないリスト | <ul><li>One</li><li>Two</li></ul> | <ul> <li>One</li> <li>Two</li> </ul> |
よくある質問
ページはどこかに送信されますか？
いいえ。整形ツールはこのページ上で動くJavaScriptです。アップロードも記録も保存もされません。ネットワークを切断してもツールは動き続けます。
インライン要素が1行のままなのはなぜですか？
動かすとページが変わってしまうからです。2つのインラインボックスの間の空白はスペースとして表示されるので、<span>a</span><span>b</span>を2行に分けると、もともとなかった隙間がその間に入ります。ほとんどの整形ツールはそれでも分けてしまいますが、このツールは分けません。
閉じられていないタグを閉じてくれますか？
いいえ。2つ目のリスト項目が1つ目を閉じることは理解しているのでリストは正しくインデントしますが、書き直すのはあなたが書いたタグです。終了タグを追加するのはマークアップのレイアウトではなく編集であり、それをどこに置くべきかは必ずしも明らかではありません。
HTMLを検証しますか？
いいえ。スキーマも、どの要素がどの要素を含められるかのルールも、属性についての意見も持っていません。受け付けないのは閉じられていないタグ、コメント、scriptブロックだけで、その先ではマークアップとテキストを区別できなくなるからです。
スクリプトやスタイルはどうなりますか？
1バイトも変わらずに戻されます。script内の<は小なり記号であってタグの始まりではなく、<pre>や<textarea>の中ではすべての空白があなたのものです。この4つの要素はもとのまま残します。スクリプトやスタイルシート自体を整形したい場合は、CSS整形ツールが隣にあります。
知っておきたいこと
- 出てくる文書は入ってきた文書と同じように表示されます。これは目視に任せるのではなく、コーパスに対するテストで保証しています。
- 何も作り出しません。終了タグを追加せず、属性の引用符を付け直さず、エンティティをデコードせず、タグ名の大文字・小文字も変えません。変わるのは属性の間の空白だけで、これは決して表示されないからです。
- 折り返し幅によって、インラインの内容を持つ要素を1行にとどめるか展開するかが決まります。短い段落は1行として読め、長い段落はもともとあった空白の位置で分割されます。