HTMLでhtmlタグやheadタグを省略してもいい場合がある、必須ではないHTMLのタグ・属性値のまとめ

Post on:2019年9月3日

<html>や</html>や<head>や</head>がないページを見たことはありませんか？
開始タグ<html>は最初の内容がコメントでなければ省略でき、終了タグ</html>は直後にコメントがなければ省略できます。また、<head>は内容が空か最初の内容が要素なら省略でき、</head>は直後に空白文字かコメントがなければ省略できます。

Web制作者が知っておきたいHTMLで必須ではない「任意のタグ」「任意の属性値」「省略してもよい属性値」を紹介します。

サイトのキャプチャ

Optional HTML: Everything You Need to Know
by Jens Oliver Meiert

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

はじめに

HTMLで必須ではない任意（オプション）のコードを記述する理由は、コードが理解しやすくなるからです。逆に任意のコードを省く理由はパフォーマンスです。

では、HTMLにおいてどのコードが任意でしょうか？
ここでは、HTMLで任意になるコードをすべて（余分な空白文字や標準的なミニファイが処理するものを除く）解説します。

1. HTMLで必須ではない任意のタグ

最新のHTMLで必須ではない、任意のタグは下記の通りです。
ここでは要素のみを記しており、自己終了要素の終了タグはカッコで囲んでいます。各タグの詳細な仕様は、リンク先をご覧ください。

  • (</area>)
    終了タグはありません。
  • (</base>)
    終了タグはありません。
  • <body> and </body>
    開始タグ<body>は内容が空か最初の内容が空白文字かコメントがなければ省略できます（ただし、最初の要素が meta, link, script, style, templateなら省略できない）。終了タグ</body>は直後にコメントがなければ省略できます。
  • (</br>)
    終了タグはありません。
  • </caption>
    終了タグ</caption>は直後に空白文字かコメントがなければ省略できます。
  • (</col>)
    終了タグはありません。
  • <colgroup> and </colgroup>
    開始タグ<colgroup>は最初の内容がcol要素で、直前に終了タグを省略された別のcolgroup要素がなければ省略できます。終了タグ</colgroup>は直後に空白文字かコメントがなければ省略できます。
  • </dd>
    終了タグ</dd>は直後に別のdt, dd要素が続くか、親要素に内容がもうなければ省略できます。
  • </dt>
    終了タグ</dd>は直後に別のdt, dd要素が続けば省略できます。
  • (</embed>)
    終了タグはありません。
  • <head> and </head>
    開始タグ<head>は内容が空か最初の内容が要素なら省略できます。終了タグ</head>は直後に空白文字かコメントがなければ省略できます。
  • (</hr>)
    終了タグはありません。
  • <html> and </html>
    開始タグ<html>は最初の内容がコメントでなければ省略できます。終了タグ</html>は直後にコメントがなければ省略できます。
  • (</img>)
    終了タグはありません。
  • (</input>)
    終了タグはありません。
  • </li>
    終了タグ</li>は直後に別のli要素が続くか、親要素に内容がもうなければ省略できます。
  • (</link>)
    終了タグはありません。
  • (</meta>)
    終了タグはありません。
  • </optgroup>
    終了タグ</optgroup>は直後に別のoptgroup要素が続くか、親要素に内容がもうなければ省略できます。
  • </option>
    終了タグ</option>は直後に別のoption, optgroup要素が続くか、親要素に内容がもうなければ省略できます。
  • </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要素以外に内容がなければ省略できます。
  • (</param>)
    終了タグはありません。
  • </rp>
    終了タグ</rp>は直後にrt, rp要素が続くか、親要素に内容がもうなければ省略できます。
  • </rt>
    終了タグ</rt>は直後にrt, rp要素が続くか、親要素に内容がもうなければ省略できます。
  • (</source>)
    終了タグはありません。
  • <tbody> and </tbody>
    開始タグ<tbody>は最初の内容がtrで、直前に終了タグが省略されたtbody, thead, tfoot要素がなければ省略できます。終了タグ</tbody>は直後にtbody, tfoot要素が続くか、親要素に内容がもうなければ省略できます。
  • </td>
    終了タグ</td>は直後にtd, th要素が続くか、親要素に内容がもうなければ省略できます。
  • </tfoot>
    終了タグ</tfoot>は内容がもうなければ省略できます。
  • </th>
    終了タグ</th>は直後にtd, th要素が続くか、親要素に内容がもうなければ省略できます。
  • </thead>
    終了タグ</thead>は直後にtbody, tfoot要素が続けば省略できます。
  • </tr>
    終了タグ</tr>は直後に別のtr要素が続くか、親要素に内容がもうなければ省略できます。
  • (</track>)
    終了タグはありません。
  • (</wbr>)
    終了タグはありません。

2. HTMLで必須ではない任意の属性値

HTMLの属性値は必ずしも引用符で囲む必要はありません（シングルクォートまたはダブルクォートにかかわらず）。HTMLの仕様で属性の構文解析の仕組みについて詳細に説明しているため、ここでは引用符を省略できる場合と省略できない場合の概要を説明します。

仕様によると、属性値には下記のルールがあります。

  • シングルクォート、またはダブルクォート(明らかに、引用符で囲まれていない構文について説明しているように)、またはグレイヴアクセント「`」は使用しない。
  • イコール「=」は使用しない。
  • 大なり「>」、または小なり「<」は使用しない。
  • アンパサンド「&」は使用しない。
  • スペースと改行は使用しない。
  • ヌル文字（U+0000）は使用しない。
  • ファイルの終わりは使用しない。

HTMLの属性値を引用符で囲む必要はありません。

スペースは次の属性値に繋げるために使用し、大なりは開始タグの終了を示します。

これらのルールを覚える簡単な方法はありますか？
私の経験では、任意のコードを手動で省略することがよくあります（ここで重要なのは正しい記号を使うことです）。属性値にスペースが含まれていない場合は、引用符を省略しても構いません。これで私はかなりうまくいっています。

3. HTMLで省略してもよい属性値

HTMLでは属性値がデフォルトと一致する場合に、省略できます。以下は、デフォルト値を持つ属性のリストです。省略した場合は、デフォルト値になります。

重要: ブーリアン型はリストに含まれていません。基本的には、存在する場合は「オン」、存在しない場合は「オフ」になります。

これらが、HTMLの任意のコードを取り除く3本柱です。任意のタグを削除し、クォートで囲む必要のない属性値は囲まず、デフォルトの属性値を省略することで、HTMLの負荷を大幅に減らすことができます。

節約を適用すべき範囲は、わたし達の技術の一部またはツールの一部とみなすわたし達の好みと同じくらい変化します。どのくらいの量が正確に節約されているかにかかわらず、任意のHTMLはあくまで任意です。任意とは「オプション」であり、それを使用して何を行うのかを知ることが重要であると示唆しています。この記事は、それをサポートするためのものです。

サイトのキャプチャ

オプションに敬意を(Copyright King Features Syndicate, Inc., distr. Bulls.)

付録1: 任意のコードを省略した時のリスク

私の10年の経験の中で、このHTMLの任意のコードを手動と自動の両方で省略してきましたが、特にリスクはありませんでした。その理由は、「コードが壊れる」というリスクがないからではなく、仕様に沿っているからです。

HTML（およびCSS）のバリデーションは無視されがちですが、無視されることで、コードの肥大化やバグの原因になるだけでなく、わたし達の専門性にも悪影響を与えます。コードに一定の品質を保証し、構文の問題は排除し、通常はそれぞれの間違いから学び、改善します。検証を行わない人は、品質の低いコードを提供し、学ぶことも理解することも遙かに少ないでしょう。

バリデーションから見ると、任意のコードは省略できますが、例外もあります。例えば、下記のコードを見てみてください。

任意のコードを省略すると、下記のようになります。

imgで実装された画像要素が、pで実装された段落の一部になっています。ここでは</p>を省略すべきではありません。

この解決策は通常、それぞれの段落を閉じるか、画像を親要素でラップするか、あるいは必要に応じてマークアップを微調整することです。

任意のHTMLを省略しても実際のリスクはなく、多くの利点があります。

付録2: HTMLの任意のコードを簡単に省略できるツール

HTMLの任意のコードを簡単に省略できるツールをいくつか紹介します。

HTMLMinifierは、HTMLのコードからすべての省略を処理できます。sumcumo.comの記事に、HTML制作を最適化するためのルールセットがあります。

他にも、HTML Compressor、NUglify、WebMarkupMinなどのツールも任意のコードを省略するタスクを任せることができます。

sponsors

top of page

©2024 coliss