HTML5って「/>」って不要だよね？ 空要素の最後にスラッシュ必要か？

By dice
No.215

ども、23年ぶりV逸にうなだれる dice（@dice_dDtea）です。

さて、
市場調査というか・・・、ライバルw調査というか・・・、
勉強のため色々と人様のソースコードを見ていると、
色々コーディング迷子なってるソースを見かけます。
Web制作会社でも時々見かけますwww

その中で今回は、閉じタグ～終了タグ方面の話をします。

<meta charset="UTF-8">
<meta charset="UTF-8" />

どっちもHTML5では無問題なんです・・・
が、どっちもよく見かけます。

一体どっちが望ましいの？

スポンサード リンク

HTML って基本的に…

foo ってタグがあったとしたら
<foo> と始め、
</foo> で閉じて終わります。

e.g.
<h3>いいから追えッ！！</h3>
<p><a href="http://a-catfish-in-winter.com/">冬のナマズ</a>みたいにおとなしくさせるんだッ！！</p>

空要素～終了タグを使わず単体で完結するものがある

しかし、
画像を表示させる imgタグ や、改行させる brタグ などは
開始タグ～終了タグで囲って使わず単体で完結するものもあります。
これを「空要素」といいます。

全部網羅できてるかわかりませんが、下記のモノがそれです。
img, br, hr, input, embed, meta, area, base, col, command, keygen, link, param, source, track, wbr

e.g.
『任務は遂行する』<br>
『部下も守る』<br>
「両方」やらなくっちゃあならないってのが<br>
「幹部」のつらいところだな<br>
<img src="arrivederci.jpg"><br>
覚悟はいいか？オレはできてる
<hr>

XHTML では空要素タグは“/>”で閉じなければいけない

コレに関して「HTML」であれば上記のような例で記述すればいいんですが、
「XHTML」にでは 「/>」で閉じないといけません。

e.g.
『任務は遂行する』<br/>
『部下も守る』<br/>
「両方」やらなくっちゃあならないってのが<br/>
「幹部」のつらいところだな<br>
<img src="arrivederci.jpg" /><br/>
覚悟はいいか？オレはできてる
<hr/>

“/>”をHTML4以前で使った結果

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
<meta name="description" content="test" />
</head>
<body>
<h1>test</h1>
</body>
</html>

これをW3Cの「Markup Validation Service」で
HTML4でチェックしてみました。

empty-element-tags1

“Error”ではなく“Warning”ですね。

「/>」はHTML4以前で使うとエラーは出ないし使えることは使えますが「非推奨」でした。

しかし、HTML5からは無問題になりました。
このXHTMLの名残というか混同して反射的に使ってしまいますが、

HTML的には“>”で閉じるべき

ですね。“/>”ではなく・・・、
XHTMLではないんですから。

 

 

まぁ、お仕事ならクライアントやディレクターに従いましょう(苦笑)
たとえ間違っていてもね(苦笑)
意見が通せる立場なら自分の信じる道を貫きましょう。

 

意識の高いウェブデザイナー・コーダーに幸多かれ＼(^o^)／
それでは～

コメント

Facebookコメント

※コメントしたけど表示されてない方へ

パーマリンクを変えてしまったおかげで表示されなくなってしまいました。
折角コメントいただいたのにスイマセンm(__)m
パーマリンク変更しても何とか表示できる方法を現在模索中です。