ハック
2016.11.24
661

HTML要素の省略

以前の記事の検証用のHTMLでもやっていましたが、HTML5では自明な要素が省略できることになっています。

例

以前の記事で用いていたHTMLを再度記述すると以下の通りです。

<meta charset="utf-8">
<title>keydownのテスト</title>
<p id="label"></p>
<script>
// ... (内容省略)...
</script>

ここで使われている省略ルールを挙げてみると、以下の通りです。

HTMLタグが省略できる
- 最初の内容がコメントでない限りHTML開始タグは省略が可能なようです。また、HTML終了タグの直後にコメントが続く場合を除き、HTML閉じタグも省略が可能なようです。
HEADタグが省略できる
- 内容が空または最初の内容が要素であれば開始タグが、直後に空白またはコメントが続かない限り閉じタグがそれぞれ省略できる
BODYタグが省略できる
- 内容が空または最初の内容が要素(ただしscript要素など一部の要素を除く)であれば開始タグが、直後に空白またはコメントが続かない限り終了タグが、それぞれ省略可能である。

上のHTMLに関して言うと、改行が入っている点が気になりますが、前の要素の末尾に改行がついていると解釈することによって「最初の内容が要素ではない空白文字である」という問題を生じないため、ルールに適合した省略だということになります。

関連する話題

閉じタグを省略すると表示が高速化されるという噂(「HTMLのタグは一部省略可能」表示速度はどちらが早いのか調べてみた | WEB EGG)や、単純に転送の量が減るのでパフォーマンスに影響があるとかないとかいう話もあるようです。

→(2016/12/04追記) よく読み直してみたら、転送量の抑制による転送速度向上と要素省略の場合のレンダリングに関するパフォーマンス低下(あるのかわからないけど、あるとして)を踏まえた全体的なパフォーマンス向上の検証記事でした。

参考