HTML5の閉じタグについて

HTML
コメント(0)
2011年12/21

HTML5にて閉じタグがいるタグと、いらないタグのお話。
これ間違うとエラーとして扱われたりするらしいので頭に入れておかねば…。

終了タグが存在しないタグ（終了タグをつけるとエラー）

br,img,hr,meta,input,embed,area,base,col,keygen,link,param,source

HTML

<br>
<img src="test.jpg">
<hr>

下記の様な書き方でスラッシュを末尾につけることで終了タグが必須なタグと区別をつけてもＯＫ。
この記法はXHTMLで採用されていた書き方で、HTMLでも使うことが出来ます。
（HTML4までは使えはするものの非推奨でしたが、HTML5からはこの書き方も文法的に正しいものになりました）

HTML

<br />
<img src="test.png" />
<hr />

終了タグのみ省略できるタグ（次のタグの開始と共に自動的に終了タグが入る）

li,dt,dd,p,tr,td,th,rt,rp,optgroup,option,thread,tfoot

省略表記をするとたとえば文字をリスト形式で表示させる<li>タグだと

HTML

<ul>
<li>リンゴ
<li>ミカン
</ul>

のようになります。上の記述は下の記述を省略したものです。</li>がなくてスッキリ！

HTML

<ul>
<li>リンゴ</li>
<li>ミカン</li>
</ul>

開始タグ終了タグ共に省略してよいタグ（タグが無ければデフォルト値が使われる）

html,head,body,tbody,colgroup

開始タグ、終了タグが省略できるとは、ずばりHTMLの書き出しの部分です。
通常HTMLの書き出しは

HTML

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>タイトルです。</title>
</head>
<body>
本文です。
</body>
</html>

みたいな書き方ですが、実は省略して

HTML

<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>タイトルです。</title>
本文です。

のような書き方も文法上は完全な正解でほぼ全てのブラウザでこの書き方でも動作するはず。

HTML5から廃止されるタグ（廃止はされるが使うことは出来る）

center,font,blink,strike,s,u,bgsound,marquee,applet,acronym,dir,frame,frameset,noframes,isindex,listing,xmp,noembed,plaintext,rb,basefont,big,spacer,tt

HTML5からは上記のタグ全てが非推奨。
ほぼ全てのブラウザで使うことは出来るものの仕様上は正しくない書き方となります。

※
この記事はHTMLにて終了タグがいるタグいらないタグ・・の話とかを引用させて頂きました。