著者JEX

HTMLにて終了タグがいるタグいらないタグ・・の話とか


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

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

終了タグのみ省略できるタグ(次のタグの開始と共に自動的に終了タグがはさまれるので)
li, dt, dd, p,
tr, td, th,rt, rp, optgroup, option, thread, tfoot

開始タグ終了タグ共に省略してよいタグ(タグが無ければデフォルト値が使われる)
html, head, body,
tbody, colgroup

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



終了タグが存在しないタグ(終了タグをつけるとエラー)
br, img, hr, meta, input, embed, area, base, col, keygen, link, param, source

例を出すとこんな感じです。<br></br>などとしてはいけません。
<br>
<img src="test.png">
<hr>

下記の様な書き方でスラッシュを末尾につけることで終了タグが必須なタグと区別をつけてもかまいません。
この記法はXHTMLというHTMLの兄弟みたいなもので採用されていた書き方ですが、
HTMLでも使うことが出来ます。(HTML4までは使えはするものの非推奨でしたが、HTML5からはこの書き方も文法的に正しいものになりました)
<br />
<img src="test.png" />
<hr />




終了タグのみ省略できるタグ(次のタグの開始と共に自動的に終了タグがはさまれるので)

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

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

のようになります。↑の書き方は↓と同じです。
<ul>
<li>スライムA</li>
<li>スライムB</li>
</ul>

余談ですが私が2chの専ブラを開発してた時の話です。
2chのスレは原則dtやdd要素を省略した表記を採用しており、
こうした省略可能タグの存在を知らなかった当時の私は
「ええっ?なんでこれで問題なく表示できるの!??」と大変驚いた記憶があります。



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

html, head, body, tbody, colgroup

開始タグ、終了タグが省略できるとは、ずばりHTMLの書き出しの部分です。
通常HTMLの書き出しは
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>タイトルですっ!</title>
</head>
<body>
本文っすよ!!
</body>
</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からは上記のタグ全てが非推奨となり、ほぼ全てのブラウザで
使うことは出来るものの仕様上は正しくない書き方となってしまいます。
上記のタグは全てCSSで代用可能であったり、同じ意味のタグがHTML4の時点で
用意されていたりするのでもともと存在の意味無かったものばかりです。
個人的にはcenterやfontなど赤字の部分のタグ位は便利なので残しておいて欲しかったような。。