[HTML5] 閉じタグ省略可能になってた
仕事で既存コードを修正中、タグを閉じていない HTML コードを見た。
タグ閉じてないじゃん!と思ったけど、 HTML5 になってから閉じタグが省略できるようになっていた。
閉じタグを省略すると、ファイルサイズが小さくなり、読み込み(表示)速度が改善することもある。
閉じタグがないタグ
開始タグしかなく、閉じタグがない(つけてはいけない)要素のことを「空要素( Void または Empty Elements )」と呼ぶ
br, hr, img, input, meta, area, base, col, embed, keygen, link, param, source
空要素は、は、<br />
や<hr />
という最後にバックスラッシュをつける書き方があり、HTML4までは非推奨だが使えていた。(確かにコードによって付いていたり、付いていなかったりする)
しかし、XHTMLの影響でバックスラッシュありの記述方法がすでに浸透しており、HTML5からは正しい文法となったようだ。
閉じタグを省略できるタグ
p, dt, dd, li, option, thead, tfoot, th, tr, td, rt, rp, optgroup, caption
<table>
<thead>
<tr>
<th>th1
<th>th2
<th>th3
<tbody>
<tr>
<td>td1-1
<td>td1-2
<td>td1-3
<tr>
<td>td2-1
<td>td2-2
<td>td2-3
</table>
ただし、省略には条件がある。
例えば、th
とtd
タグは、th
またはtd
タグが続く、または親要素がそれ以上含まれていない場合のみ省略可能。
開始タグも閉じタグも省略できるタグ
開始タグの省略は、「要素が存在しない」ということではない。HTMLファイルから省略しても、ブラウザ側で付け足しといてくれるということ。
html, head, body, tbody, colgroup
省略して書くとこのようになる。コードが短くなった!
<!DOCTYPE HTML>
<meta charset="utf-8">
<title>Hello</title>
<h1>h1 Title</h1>
ただし、次の場合には省略できない
- html開始タグ(
<html>
):html
要素がコメントで始まる場合<!DOCTYPE HTML> <html> <!-- html要素がコメントで始まる場合はタグを省略できない --> <head>・・・・・・・ </html>
- html終了タグ(
</html>
):html
要素の直後にコメントがある場合 - head開始タグ(
<head>
): このタグ直後が要素ではない場合(head
要素が空、または直後に要素が続く場合、省略可) - head終了タグ(
</head>
):head
開始タグの後(head
要素内の始まり)にコメントまたは空白文字がある場合<!-- タイトルタグの左に空白がある場合(うっかり全角スペースが入ってしまったとか)、head開始と終了タグは省略できない --> <head> [全角スペース]<title>Hello</title> </head>
- body開始タグ(
<body>
): このタグ直後にコメントまたは空白文字がある場合、body
要素がmeta、link、script、style、template
のいずれかで始まる場合(body要素が空の場合、省略可) - body終了タグ(
</body>
):body
開始タグの後(body
要素内の始まり)にコメントがある場合
以上を踏まえると、これだけでも OK のはず
<!DOCTYPE HTML>
<title>Hello</title>
これを、Validator.nuでValidateすると問題ないが、W3C Markup Validation Serviceで Check すると、 html
タグの lang
を指定するよう「 Warning 」が出る。(「Error」ではないが、<html lang="ja">
とか書いといた方がいいのかも)
html って言ってるくらいだから、当たり前すぎるけど、 html
タグ省略できるんだ。。。
10年後の若い技術者は、「html
タグなんてあったんですねー!」とか言いそう。
消えたタグ
center, font, blink, strike, s, u, bgsound, marquee, applet, acronym, dir, frame, frameset, noframes, isindex, listing, xmp, noembed, plaintext, rb, basefont, big, spacer, tt
廃止にはなったが、今のところ使える。
PHP
の PDF 作成ライブラリ「 TCPDF 」では、廃止になったタグが使える(というかそれしか使えない)。