code HTML / XML フォーマッター＆バリデーター star

仕組み

フォーマッターはマークアップを走査しながらネストの深さを追跡していきます。開始タグが現れるたびに深さカウンターを1段階押し上げ、対応する終了タグが現れるたびに1段階引き下げます。各出力行の先頭には、その時点での深さに比例した数のインデント単位が付与されます — 1段階深いタグには1単位のインデント、4段階深いタグには4単位のインデントが付き、以下同様です。テキストノード、コメント、属性は、それらを含む要素の深さを引き継ぐため、最終的な結果は途切れのない文字の壁ではなく、文書の実際のツリー構造を視覚的に反映したものになります。

例えば、<ul><li>A</li><li>B</li></ul>のような詰め込まれた1行のコードは、最上位レベルの<ul>、1段階インデントされた<li>A</li>と<li>B</li>、そして最上位に戻る終了タグ</ul>という形に整形されます — 1行だったものが3行になり、それぞれの深さがインデントだけですぐに読み取れるようになります。<br>や<img>のような空要素は、内部に何もネストできないため、深さカウンターを押し上げることはありません。

知っておくべきこと

XMLモードを選ぶと、パーサーは厳格になります。閉じられていないタグ、不正な入れ子、無効な文字といった整形式違反はすべて、黙って修正されるのではなく、具体的なエラーメッセージとともに報告されます。HTMLモードを選ぶと、ツールは代わりにベストエフォートのタグ対応チェックを実行します。というのも、ブラウザ自体がHTMLを寛容に解析しており、検出すべき同等の厳格な「無効」状態が存在しないためです。この違いは2つのフォーマットの間にある実際の差を反映しています。XMLの仕様は、文書が整形式であるか、そうでなければ完全に拒否されるかのどちらかを求めており、その中間はありません。一方HTML5は、閉じタグの付け忘れのような小さな記述ミスがページを壊さないよう、意図的にそう設計されています。この寛容な伝統こそが、<br/>がXMLでは必須であるのに対し、HTMLでは<br>と<br/>のどちらも有効で互換性がある理由でもあります。

これは手書きのマークアップを整えるという用途をはるかに超えて役立ちます。実際のページから取得した圧縮済みHTML、1行の密な文字列として返されるXML APIのレスポンス、あるいは整形なしでエクスポートされた設定ファイル — これらはすべて、深さに基づくインデントを適用することで格段に読みやすくなり、配置ミスのあるタグも見つけやすくなります。インデントは入力からそのままコピーされるのではなく解析された構造から再計算されるため、元の空白の付け方がどれほど不揃いであっても出力は常に一貫したものになります。