HTML5には「仕様で」省略できるタグが存在すること、ご存知ですか？今回はそんなタグたちを紹介しようと思います。
省略できる条件
HTML5の 8.1.2.4. 節にて書かれています。8.1.2.4. Optional tags
要約するとこんな感じです
- 属性を持っている場合、その開始タグは省略できない
- つまり
<html>は省略できるが、<html lang="ja">は省略できない
- つまり
- 開始タグが省略可能な場合、そのタグは あってもなくても動作が同じ
主なタグの省略条件
それぞれのタグを省略できる条件は以下のとおりです
- <html>タグ
- 最初がコメントでない
- </html>タグ
- 直後がコメントでない
- <head>タグ
- 最初がコメントでない
- 空である
- </head>タグ
- 直後がコメントでない
- 直後がスペースでない
- <body>タグ
- 最初がコメントでない
- 空である
- 最初が<meta>、<link>、<script>、<style>、<template>がでない(この条件がないとhead要素がどこで終わりか確定できない)
- </body>タグ
- 直後がコメントでない
他の省略できるタグ
次の要素の終了タグは省略可能です。
- li
- dt、dd
- p
- rt、rp
- optgroup、option
- colgroup
- caption
- thead、tbody、tfoot
- tr、td、th
また、colgroup、tbodyに関しては開始タグも省略できます。詳しい条件については仕様書をご覧ください。
省略してみる
実際に省略するとどれほど簡潔になるかコードを書いてみました。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>optional tag</title> <link href="style.css" rel="stylesheet"> <script></script> </head> <body> <h1>Optional tags</h1> <ul> <li>li</li> <li>dt、dd</li> <li>p</li> <li>rt、rp</li> <li>optgroup、option</li> <li>colgroup</li> <li>caption</li> <li>thead、tbody、tfoot</li> <li>tr、td、th</li> </ul> </body> </html>
これがここまで短くなります。
<!DOCTYPE html> <html lang="ja"> <meta charset="utf-8"> <title>optional tag</title> <link href="style.css" rel="stylesheet"> <script></script> <h1>Optional tags</h1> <ul> <li>li <li>dt、dd <li>p <li>rt、rp <li>optgroup、option <li>colgroup <li>caption <li>thead、tbody、tfoot <li>tr、td、th </ul>
かなり読みやすくなりました。一見すると正しくないHTMLに見えますが、きちんと仕様に従っています。
終わりに
HTML5は勧告されてから3年半が経とうとしています。仕様に則ってタグを省略すると、読みやすくなるだけではなくファイルサイズの縮小にも役に立ちます。これを機に省略したスタイルを試してみてはいかがですか？
