~/tools / HTML Formatter
HTML Formatter
HTMLをインデント付きで整形します。ブラウザ標準のDOMParserで解析するため、実際のブラウザの解釈に近い形で整形されます。
ミニファイされた/1行に詰まったHTMLソースを確認したいときや、テンプレートエンジンの出力を見やすく整えたいときに使います。実際のブラウザと同じパーサーで解釈するため、崩れたHTMLでもある程度は解釈されます。
# こんな時に使う
- テンプレートエンジンやSSRが出力した1行のHTMLを確認したいとき
- ミニファイされたHTMLソースを読んで構造を把握したいとき
- 閉じタグ漏れなど崩れたHTMLが、ブラウザにどう解釈されるか確認したいとき
# 使い方
- 整形したいHTMLをテキストエリアに貼り付けます。
- 「整形する」を押すと、インデント付きの読みやすい形で表示されます。
# FAQ
- 壊れたHTML(閉じタグ忘れ等)も整形できますか?
- はい。ブラウザのHTMLパーサーはXMLと違ってエラーを出さず、可能な限り解釈しようとします。ただし、意図しない構造になる場合があるため、結果は確認してください。
- <script>や<style>の中身も整形されますか?
- 内部のJavaScript/CSSコードそのものは再整形せず、テキストとしてそのまま出力します。
# Related
# 姉妹サイトで学ぶ
- HTML/CSS入門
ブラウザで動かしながら学ぶ — prodou.net