【HTML5】閉じタグ省略可能なもの

極稀にHTML5のコードを見ると、閉じタグがなかったりすることがあり、戸惑ったのですが、実は、結構な数の閉じタグが省略できるようです。

閉じタグを省略することで、ファイルサイズが小さくなり、読み込み速度等の改善につながることもあるようです。詳しくは、13 The HTML syntaxあたりを参考にしてください。

閉じタグがないタグ

もともと、閉じタグをつけてはイケないものは、下記の通りです。

br, hr, img, input, meta, area, base, col, embed, keygen, link, param, source

このような要素を空要素(Empty Elements)と呼ぶようです。

閉じタグが省略できるタグ　

p, dt, dd, li, option, thead, tfoot, th, tr, td, rt, rp, optgroup, caption

このあたりのタグが省略可能です。
※ 条件があるものもあるが、ここでは省略します。

開始、終了共に省略できるタグ

html, head, body, tbody, colgroup

あたりが省略可能です。
※ 条件があるものもありますが、ここでは、省略します。

例

下記のような簡単HTMLでタグを省略してみます。

<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="UTF-8" />
<title>hello world</title>
</head>
<body>
<div id="app">
  <p>{{ display }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@3.0.0/dist/vue.global.js"></script>
<script>
  const app = Vue.createApp({
    data: () => ({
      display: 'Hello World!'
    })
  });
  app.mount("#app");
</script>
</body>
</html>

省略すると下記のようになります。

<!DOCTYPE html>
<html lang="jp">
<meta charset="UTF-8" />
<title>hello world</title>
<div id="app">
  <p>{{ display }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@3.0.0/dist/vue.global.js"></script>
<script>
  const app = Vue.createApp({
    data: () => ({
      display: 'Hello World!'
    })
  });
  app.mount("#app");
</script>

htmlタグやbodyタグといったものは、省略できるので、最初は戸惑うかもしれないですね。