logo Ribbit's works

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

#HTML
にメンテナンス済み
記事のトップ画像

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

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

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

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

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

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

注意： 2021年1月28日、W3C（World Wide Web Consortium）はHTML5標準を廃止し、WHATWG（Web Hypertext Application Technology Working Group）が策定する HTML Living Standard に移行しました。本記事の内容は現在のHTML Living Standard（2025年1月現在も継続して更新中）においても有効です。

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>

まとめ

HTMLタグの省略は確かに可能ですが、以下の点にご注意ください：

メリット:

  • HTMLファイルサイズの削減（特にデータ量が制限される環境で有効）
  • 記述量の軽減

デメリット:

  • 可読性の低下
  • メンテナンスの困難
  • チーム開発での理解しにくさ
  • 一部のツール（リンター、フォーマッターなど）との互換性問題

推奨事項:

  • 開発段階: 可読性を重視し、タグを明示的に記述
  • 本番環境: 必要に応じてビルドツールによる自動最適化を検討
  • パフォーマンス重視: gzip圧縮の方が効果的な場合が多い

現代のWeb開発では、HTMLminifierなどの自動化ツールを使用して、開発時の可読性と本番環境のパフォーマンスを両立することが一般的です。