XMLとHTMLの整形ルールの違い｜似て非なる2言語
「タグだから同じだろう」の落とし穴
XMLとHTMLは似ていますが、整形時の扱いは別物です。本記事ではXML FormatterとHTML Formatterで挙動が違う理由を整理します。
5つの主な違い
| 観点 | XML | HTML |
|---|---|---|
| 閉じタグの省略 | 不可 | 一部許容（<li>, <p> 等） |
| 自己終了タグ | <br/> 必須 | <br> でOK |
| 大文字小文字 | 区別する | 区別しない |
| 属性値のクォート | 必須 | 一部省略可 |
| CDATA | 使える | 使えない（XHTML除く） |
これらが整形・圧縮アルゴリズムの設計に影響します。
1. 閉じタグの省略
HTML
<ul>
<li>項目1
<li>項目2
</ul>
これはHTMLとして有効です。<li> の閉じタグはブラウザが補完します。
XML
同じ書き方はXMLではパースエラー。すべてのタグは明示的に閉じる必要があります。
→ XML Formatterの整形は「閉じタグが対応している前提」で動作。HTML Formatterのほうが寛容。
2. 自己終了タグ（self-closing）
XML
<img src="a.png"/>
<br/>
<input/>
スラッシュで終わる必要があります。
HTML
<img src="a.png">
<br>
<input>
スラッシュなしでもOK（HTML5）。
→ XML Formatterは <.../> を厳密に検出してインデント計算に使います。HTMLでは「ボイド要素」のリストが内部で必要。
3. 大文字小文字
XML
<Note></Note>
<NOTE></NOTE>
<Note> と <NOTE> は別のタグとして扱われます。
HTML
<DIV></div>
これは合法。<div> と <DIV> は同じです。
→ XML Formatterのトークナイザは大文字小文字を保持して出力します。HTML Formatterは小文字に正規化することが多い。
4. 属性値のクォート
XML
<note id="1" public="true">
すべての属性値は " または ' で囲む必要があります。
HTML
<input type=text disabled>
英数字だけならクォートなしでも動作（推奨はされません）。
5. CDATAブロック
XML
<script><![CDATA[
if (a < b) { ... }
]]></script>
< や & をエスケープせずに書ける領域。XMLのみの機能。
HTML
HTMLには標準的なCDATAはありません（<script> の中身は特別扱いで、CDATAなしで < が書ける）。
→ XML Formatterは <![CDATA[...]]> をトークンとして認識し、整形・圧縮どちらでも中身を保持します。HTML Formatterにはこの概念は不要。
整形時の「インライン化」の違い
XML（本ツール）
<to>太郎</to>
<to>太郎</to> のような <open>text</close> パターンは1行に保持します。XMLのテキストノードは構造的に意味があるため、改行を入れると逆に意味が変わる可能性があります（xml:space="preserve" などの解釈に影響）。
HTML（Prettier）
HTMLは htmlWhitespaceSensitivity 設定で挙動を切り替え:
css: CSS的にインライン要素は同じ行、ブロック要素は改行strict: 全要素で空白を保持ignore: 全要素で空白を無視
CSS的な扱い（デフォルト）では <a>, <span> のようなインライン要素は同じ行になります。
圧縮時のテキスト空白
XML
<title> Hello World </title>
圧縮時に「連続空白を1個」に正規化。本ツールでは <title>Hello World</title> になります。
HTML
タグ間の空白は削除しますが、属性値の空白などは触らないことが多い。
XHTML はどっち？
XHTML（XML形式のHTML）はXMLとして整形すべきです。閉じタグ・大文字小文字・属性クォートがすべて厳密。
ただし現代では純粋なXHTMLはほぼ使われていないため、XHTMLっぽい書き方のHTMLは HTML Formatter で問題ありません。
関連記事
「タグだから同じ」と思って混同すると、整形結果に違和感が出ます。XMLは厳格、HTMLは寛容、と覚えるのが第一歩。