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

hidekazu kawashima

4年前

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

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

Toggle

閉じタグがないタグ

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

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タグといったものは、省略できるので、最初は戸惑うかもしれないですね。

htmlの構文チェックツール

おわりに

パフォーマンス改善等に取り組む際などに、どうしてもというときにHTMLタグの省略などを利用することもあるかもしれないですね。なかなか慣れないですが^^;