HTMLの空要素にはXHTMLとEPUB3との互換性維持のため閉じスラッシュをつけるべき

HTMLでmetaタグやlinkタグなどのタグの中身を持たない空要素に終端スラッシュを付けるべきかどうか悩んだ。調べた結果，付けるべきだという結論が出た。その理由は以下だ。

• EPUB3とXHTMLとの互換性維持。
• 要素が空要素であり，終了タグが不要であることが明確。

HTML5では終了タグのいらない空要素（Void elements）として以下の15要素が存在する（ 8 HTML構文 — HTML5 日本語訳 http://momdo.github.io/html5/syntax.html#void-elements）。

area、base、br、col、embed、hr、img、input、keygen、link、meta、param、source、track、wbr

これらの空要素を記述するときは，以下の2通りの記述方法が許されている（ 8 HTML構文 — HTML5 日本語訳 http://momdo.github.io/html5/syntax.html#start-tags）。

<meta charset="UTF-8">
<meta charset="UTF-8" />

1番目と2番目の違いは閉じスラッシュ（/）の有無だ。HTML5としてはどちらの記述も許容している。この件については，WHATWGのHTML5のFAQでも以下のように回答されている。

HTML の空要素（たとえば、br, img, input 要素）に終端スラッシュをいれる必要はありません。<br /> の代わりに <br> と書けば良いだけです。これは HTML4 と同じです。しかし、XHTML1 の利用が広まっているため、かなり多くのページで、終端スラッシュが使われています。そのため、XHTML1 から HTML への移行を容易にするために、終端スラッシュの構文を HTML の空要素で使うことができるようになりました。

WHATWG FAQ – 日本語訳 – HTML5.JP http://www.html5.jp/trans/whatwg_html5faq.html#Should_I_close_empty_elements_with_.2F.3E_or_.3E.3F

空要素の終端スラッシュはxhtml1からの移行を進めるために残してある，つまり非推奨という文脈にとれる。この終端スラッシュを否定する意見もみられる。

HTML – <br /> じゃなくて <br> だよ – Qiita http://qiita.com/irxground/items/dc3e688d7d48c01c3988

しかし，互換性を考えると終端スラッシュを省略しないほうがよさそうだ。以下の二つのリンクが参考になる。

• 絳アト日記: HTML5 の XML 版の書き方 http://akaato.blogspot.jp/2011/06/html5-xml.html
• XHTML5 について – HTML5 リファレンス http://www.marguerite.jp/Nihongo/WWW/RefHTML5/Appendix/XHTML5.html

終端スラッシュを付けないとxhtmlとの互換性がなくなってしまい，不正なxhtmlとみなされる。また，電子書籍の形式であるEPUB3はHTML5に準拠したXMLであるXHTML5で記述する必要がある（EPUB 3 Overview（日本語訳版） http://imagedrive.github.io/spec/epub301-overview.xhtml#sec-content-docs）。

また，終端スラッシュをつけることで空要素であることが一目でわかり，終了タグを気にしなくてもよいことに気が付きやすいというメリットがある。よって，HTMLを記述するときは空要素に閉じスラッシュをつけるべきだ。

なお，空要素を記述するときの終端スラッシュは，属性を設定しているときは直前に空白が必須なので注意する。以下に例を示す。

○：<br/>
○：<br />
○：<meta charset="UTF-8" />
×：<meta charset="UTF-8"/>