web-dev-qa-db-ja.com

（非無効）自己終了タグはHTML5で有効ですか？

W3Cバリデーター は non-void 要素上の自己終了タグ（ "/>"で終わるもの）を好まない。 （Void要素はコンテンツをまったく含まない可能性がある要素です。）それらはまだHTML 5では有効ですか？

受け入れられた void要素のいくつかの例：

<br />
<img src="" />
<input type="text" name="username" />

rejected _ void以外の要素の例：

<div id="myDiv" />
<span id="mySpan" />
<textarea id="someTextMessage" />

注：実際にはW3Cバリデータは無効な自己終了タグを受け入れます：作者はもともと単純なタイプミスのため問題を抱えていました（\>ではなく/>）。 ただし、自己終了タグは一般にHTML 5では100％有効ではないため、さまざまなHTMLフレーバーにわたる自己終了タグの問題について回答が詳しく述べられています。

htmlhtml5syntaxw3c-validation
603
cdeszaq

  • HTML 4では、<foo /（はい、>はまったくありません）は<foo>を意味します（これは<br />が<br>>（つまり<br>&gt;）を意味し、<title/hello/が<title>hello</title>を意味します） 。これはSGMLルールであり、ブラウザはサポートの非常に貧弱な仕事をしていました、そして 構文 を避けてください。

  • XHTMLでは、 <foo />は<foo></foo> を意味します。これは、すべてのXMLドキュメントに適用されるXMLルールです。そうは言っても、XHTMLはtext/htmlとして提供されることが多く、application/xhtml+xmlとして提供されるドキュメントとは異なるパーサーを使用するブラウザーによって（少なくとも歴史的に）処理されます。 W3Cは、XHTMLでtext/htmlとして従うために compatibility Guidelines を提供しています。 （本質的に：要素がEMPTYとして定義されている場合（およびHTML仕様で終了タグが禁止されている場合）のみ、自己終了タグ構文を使用します）。

  • HTML5では、<foo />の意味は要素のタイプに依存します 。

    • void elements（本質的には「HTML5より前に存在し、コンテンツを持つことが禁止されていた要素」）として指定されたHTML要素では、終了タグは単に禁止されています。開始タグの最後のスラッシュは使用できますが、意味はありません。これは、XMLにはまっている人々（および構文ハイライター）のための単なる構文上の砂糖です。
    • 他のHTML要素では、スラッシュはエラーですが、エラーを回復すると、ブラウザはそれを無視し、タグを通常の開始タグとして扱います。通常、これにより、終了タグが欠落し、後続の要素が兄弟ではなく子になります。
    • 外部要素（SVGなどのXMLアプリケーションからインポート）は、それを自己終了構文として扱います。
1196
Quentin

Nikita Skvortsovが指摘したように、自己閉鎖divは検証しません。これはdivが 通常の要素 であり、 void要素 ではないためです。

HTML5仕様 によると、内容を持つことができないタグ（ void要素 として知られる）は自己終了*することができます。これには以下のタグが含まれます。

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

上記のタグでは "/"は完全にオプションであるため、<img/>は<img>と違いはありませんが、<img></img>は無効です。

*注： 外部要素 も自己終了することができますが、それはこの回答の範囲内ではないと思います。

381
Chris Starnes

実際には、HTMLで自己終了タグを使用すると、期待どおりに機能するはずです。ただし、valid HTML5の作成に不安がある場合は、使用できる2つの異なる2つの構文形式内でこのようなタグを使用する方法を理解する必要があります。 HTML5は、HTML構文とXHTML構文の両方を定義します。これらは似ていますが、同一ではありません。どちらが使用されるかは、Webサーバーから送信されるメディアタイプによって異なります。

おそらく、ページはtext/htmlとして提供されており、これはより寛容なHTML構文に従っています。これらの場合、HTML5では、特定の開始タグに、終了前にオプションの/を含めることができます>。これらの場合、/はオプションであり、無視されるため、<hr>と<hr />は同一です。 HTML仕様では、これらの「void要素」を呼び出し、有効な要素のリストを提供しています。厳密に言えば、オプションの/は、これらのvoid要素の開始タグ内でのみ有効です。たとえば、<br />と<hr />は有効なHTML5ですが、<p />は有効ではありません。

HTML5仕様では、HTML作成者とWebブラウザー開発者にとって何が正しいかを明確に区別しています。2番目のグループは、あらゆる種類の無効な「レガシー」構文を受け入れる必要があります。この場合、HTML5準拠のブラウザーは、<p />などの不正な自己終了タグを受け入れ、予想どおりにレンダリングすることを意味します。しかし、著者にとって、そのページはnotは有効なHTML5です。 （さらに重要なことは、この種の不正な構文を使用して得られるDOMツリーはひどくめちゃくちゃになる可能性があります。たとえば、自己閉じた<span />タグは、物事を混乱させる傾向がありますたくさん） 。

（サーバーがXHTMLファイルをXML MIMEタイプとして送信する方法を知っている異常な場合、ページはXHTML DTDおよびXML構文に準拠する必要があります。つまり、自己終了タグは必須そのように定義された要素。）

62
Michael Edenfield

HTML 5は基本的に末尾のスラッシュがないかのように振る舞います。 HTML5の構文には、自己終了タグのようなものはありません。

  • <p/>、<div/>のような non-void 要素の自己終了タグはまったく機能しません。末尾のスラッシュは無視され、これらは開始タグとして扱われます。これはネスティングの問題につながる可能性があります。

    スラッシュの前に空白があるかどうかにかかわらず、これは当てはまります。<p />と<div />も同じ理由で機能しません。

  • void <br/>や<img src="" alt=""/> のような要素の自己終了タグは - で動作しますが、これは末尾のスラッシュが無視され、この場合は正しい動作になるためです。

その結果、古い "XHTML 1.0 text/html"として機能していたものは、以前と同じように機能し続けます。つまり、非voidタグの末尾のスラッシュも受け入れられず、無効要素の末尾のスラッシュも機能しました。

もう1つの注意：HTML5文書をXMLとして表現することは可能で、これは "XHTML 5.0"と呼ばれることがあります。この場合、XMLの規則が適用され、自己終了タグが常に処理されます。それは常にXML MIMEタイプで提供される必要があるでしょう。

8
thomasrutter

自己終了タグはHTML 5では有効ですが、必須ではありません。

<br>と<br />はどちらも問題ありません。

3
Nick

この例が示すように、自己終了タグについては非常に注意してください。

var a = '<span/><span/>';
var d = document.createElement('div');
d.innerHTML = a
console.log(d.innerHTML) // "<span><span></span></span>"

私の直感は代わりに<span></span><span></span>でした

1
Andreas Herd

しかし、レコードに合わせて - これは無効です。

<address class="vcard">
  <svg viewBox="0 0 800 400">
    <rect width="800" height="400" fill="#000">
  </svg>
</address>

そしてここでのスラッシュはそれを再び有効にするでしょう：

    <rect width="800" height="400" fill="#000"/>
0
Leo