HTML整形

ほとんどのHTMLフォーマッターは、名前を変えただけのXMLフォーマッターです。そして両者の4つの違いは、いずれも実際のバグを生んできました。

void要素はスコープを開かない

<br>、<img>、<input>、<hr>とそのほか10個の要素には閉じタグがありません——省略できるのではなく、そもそも存在しません。開始タグごとにインデントを深めるフォーマッターは、最初の<img>以降をすべて1レベル右へ押しやり、二度と戻りません。画像が20個あるページは、画面の外までインデントされることになります。

scriptとstyleの中身はマークアップではなくテキスト

<script>の中に現れた<は、単なる「より小さい」記号です。タグとして解析しようとすれば、if (a < b)がドキュメントをめちゃくちゃにします。上のサンプルにまさにこの式が入っているのはそのためです。<script>、<style>、<textarea>、<title>の内容は、対応する閉じタグまでひとまとまりで取り込まれます。

インライン要素間の空白は表示に影響する

<b>a</b> <i>b</i>は「a b」と表示されます。間の空白がなければ「ab」です。すべての要素を独立した行に置くフォーマッターは、ドキュメント内のあらゆるテキストの流れに空白を1個ずつ挿入したのと同じことになります——典型的な症状は、句点の前やリンクの後にできる意図しない隙間です。そこでこのツールは、インライン要素をバッファされた連なりの中に保持し、行を始めるのはブロック要素だけにしています。同じ規則により、<pre>の内容は決して再インデントされません。ここでは空白こそがレイアウトだからです。

いくつかの要素では閉じタグを省略できる

</li>、</p>、</td>などは省略でき、手書きのHTMLでは実際に省略されていることもよくあります。厳格なタグスタックを持つフォーマッターは、ドキュメントを拒否するか、インデントを崩すかのどちらかになります。このツールでは、スタックの先頭と一致しない閉じタグに出会うと、閉じが省略可能な要素を巻き戻して通過します。

解析が報告する内容

alt属性のない<img>は警告の対象になります。スクリーンリーダーは代わりにファイル名を読み上げることになり、それは沈黙よりひどい結果です。装飾画像には属性を省くのではなくalt=""を付けるべきなのは、このためです。閉じられていない要素は名前を特定して報告します。ブラウザは後から復旧しますが、どこで閉じるかを決めるのはブラウザであってあなたではなく、両者はしばしば食い違います。