[HTML5] 閉じタグ省略可能になってた

2019-02-16HTML&CSS

仕事で既存コードを修正中、タグを閉じていない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>

ただし、省略には条件がある。
例えば、thtdタグは、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」では、廃止になったタグが使える(というかそれしか使えない)。

Posted by Agopeanuts