HTML Advent Calendarの最後ということで、閉じタグを考えてみることにしました。
いろんな表記法
XHTMLの流行もあって、空要素の閉じ方にもいろいろ流儀が発生しました。
<br><br/><br /><br></br>
さて、どう書けばいいのでしょうか。また、時々「閉じタグにどんなタグを閉じたか書いておく」という人がいますが、これはどうなのでしょうか。
HTML Live Standard
かつてはHTMLの規格をW3Cが定めていましたが、ブラウザベンダーたちが「規格化が遅い」とWHATWGを立ち上げました。そして紆余曲折を経て、「WHATWGが先行してLive Standardを作って、それをあとからW3Cがバージョン番号を付けてfixする」というような分業体勢に落ち着いています。
ということで、最新版の仕様書は順次https://html.spec.whatwg.org/に上がってきます。これをもとに考えていきましょう（以下「LS」と略します）。
タグの開き方・閉じ方
空要素の場合
空要素の場合、LS§12.1.2.1 Start tagsによれば、
- HTMLの要素の場合、最後の
/は付けても付けなくてもいい（name=valueという引用符なしの属性値がある場合は、スペースで区切る必要あり） - MathMLやSVGを混ぜ込んでいる場合、XMLのルールに従ってSelf-closeで書く必要がある
とのことです。なお、規格とは関係ないですが、RiotタグをHTML文書内に書く場合は<riot-element></riot-element>の形である必要がある、とのことです。
閉じタグ単体で書く場合
閉じタグだけを書く場合については、LS§12.1.2.2 End tagsにあります。
-
</タグ名までは連続で書く -
</タグ名と>の間にはASCII範囲のタブ、スペース、改行が入っても構わない
ということで、</p class="hoge">のようなことはできません。
閉じタグを省略できる場合
一部の場合、閉じタグを省略することが認められています。なお、「コメントやホワイトスペースが続かない場合」に限定して省略可能となっているものもありますが、単にそれらがどっちの要素に取り込まれるかの違いしかなく、厳密にコメントやテキストノードをたどる場合以外は実用上の影響がほぼないので、その条件は基本的に省略します。
-
</html>・</head>・</body>・</colgroup>・</caption>…ホワイトスペースやコメントを気にしなければ常に省略可 - 同種の要素が続く場合と、親要素が終わる直前に省略できるもの…
</li>・（</dt>＆</dd>）・（</rt>＆</rp>）・</optgroup>・</option>・（</thead>＆</tbody>＆</tfoot>）・</tr>・（</td>＆</th>） -
</p>は<table>や<ul>など、<p>が入らない要素の前でも省略可能