極限まで高速化を目指す方向けのHTMLで省略可能なタグ一覧

2021年7月29日にメンテナンス済み

HTMLを記述する際は、XMLのように、開始タグと終了タグの数が一致している必要はありません。

特定の条件のもと、特定のタグは省略可能です。

<!doctype html>
<html>
  <head>
    <title>そのタグ</title>
  </head>
  <body>
    <p>本当に必要？</p>
  </body>
</html>

上記のコードは以下のように書いても、ブラウザでは同じように解釈されます。

<!doctype html>
<title>そのタグ</title>
<p>本当に必要？

今回は省略可能なタグとその条件をまとめましたので、よろしければご活用ください。

html, head, bodyタグ

開始タグの省略

html, head, bodyについて、各エレメント内の最初の要素がコメント出ない場合開始タグを省略できます。

<!-- 省略前 -->
<html>
  <head>
    <title>僅かな差ですが</title>
  </head>
  <body>
    <p>静的コンテンツの削減は重要です</p>
  </body>
</html>

<!-- 省略後 -->

    <title>僅かな差ですが</title>
  </head>

    <p>静的コンテンツの削減は重要です</p>
  </body>
</html>

htmlやbodyタグに属性を持たせたい場合などは、タグを明記する必要があります。

終了タグの省略

html, bodyについては、開始タグと同様に、直後のエレメントがコメントでなければ終了タグも省略可能です。

また、headの終了タグについては、直後のエレメントがコメントでないことに加えて、meta, link, title, script, styleなど、基本的にheadエレメント内に記述する要素のみで構成されている場合は、headの終了タグを省略できます。

<!-- 省略前 -->
<html>
  <head>
    <meta></meta>
    <link></link>
    <title></title>
    <script></script>
    <style></style>
  </head>
  <body>
    <p></p>
    <div></div>
  </body>
</html>

<!-- 省略後 -->
<meta></meta>
<link></link>
<title></title>
<script></script>
<style></style>

<p>
<div></div>

liタグ

liエレメントについて、

直後のエレメントがliである場合。
同一階層の最後のエレメントである場合。

上記のいずれかに当てはまる場合、終了タグを省略できます。

<ul>
  <li>item1
  <li>item2
  <li>item3
  <li>item4
</ul>

pタグ

pの終了タグも省略することができますが、定義が少々複雑です。条件は、

直後のエレメントが address, article, aside, blockquote, details, div, dl, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, main, menu, nav, ol, p, pre, section, table, ul である場合。
同一階層の最後のエレメントであり、親エレメントが a, audio, del, ins, map, noscript, video でない場合。

上記のいずれかに当てはまる場合です。

<a>
  <p>省略できる
  <p>省略できる
  <p>省略できない</p>
</a>
<div>
  <p>省略できない</p>
  <a></a>
  <p>省略できる
</div>