＞ ＞ ＞ HTML5でタグをどれだけ省略できるか調べてみた

HTML5でタグをどれだけ省略できるか調べてみた

Posted at September 12,2012 1:55 AM
Tag：[HTML5]

ご存知の方も多いと思いますが、HTML5ではタグの省略が可能になっています。

ということで、タグをどれだけ省略できるのか調べてみました。

なお、HTML5に準拠したWebブラウザ上であれば、省略した要素と同一のDOMが生成されることが保証されるようですので、そのあたりも踏まえてます。

１．タグ自体の省略が可能な要素

タグ自体の省略が可能な要素、つまり開始タグ・終了タグの両方の省略が可能な要素は以下です。

  • html
  • head
  • body
  • colgroup
  • tbody

これらのタグを省略した次のようなソースコードをFirebugで参照すると、html要素、head要素、body要素がきちんと生成されていることが分かります。

ソースコード

<title>foo</title>
<style>
body {
    font-size: 100%;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<p>Hello World!</p>

Firebugの結果
Firebugの結果<br />

２．終了タグの省略が可能な要素

終了タグの省略が可能な要素は以下です。

  • colgroup
  • dd
  • dt
  • li
  • optgroup
  • option
  • p
  • rt
  • rp
  • thead
  • tbody
  • tfoot
  • tr
  • td
  • th

たとえばli要素の場合、

<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>

を、

<ul>
<li>aaa
<li>bbb
<li>ccc
</ul>

と記述することができます。

こちらもFirebugで参照すると、終了タグが生成されています。

Firebugの結果
Firebugの結果<br />

３．最小限のマークアップ

本題の最小限のマークアップですが、1年半ほど前にちょっと話題になった「html5.us」のHTML5マークアップは次のようになっていて、Validator.nuでValidになります。

<!DOCTYPE html>
<title>html5.us</title>
<style>pre{font-family:courier,monospace;font-size:48px;margin:5% auto;text-align:center;width:50%;}</style>
<pre><code>&lt;!doctype html&gt;</code></pre>

ちなみに、Validator.nuでValidになる最小限のマークアップは次のとおりです。認識誤りでしたらすいません。

<!DOCTYPE html>
<title>test</title>

Firebugの結果
Firebugの結果<br />

実際の運用でどこまで省略するかは別として、ちょっとしたHTMLマークアップをしたいときには非常に便利な仕様です。

Posted by yujiro   このページの先頭に戻る
関連記事
関連記事をもっと読む
トラックバックURL


コメントする
greeting

*必須

*必須（非表示）


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り（プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り）、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります（全て半角文字）