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

#HTML

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

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

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

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

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

<!DOCTYPE html>
<title>そのタグ</title>
<p>本当に必要？</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>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
</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>
  <p>省略できない</p>
</a>
<div>
  <p>省略できない</p>
  <a></a>
  <p>省略できる</p>
</div>