Kendiliğinden kapanan (geçersiz olmayan) etiketler HTML5'te geçerli mi?

W3C doğrulayıcı kendi kendine kapanan etiketleri (olanlarda bu son "gibi değil />üzerinde ") olmayan boşluk elemanları. (Geçersiz öğeler hiç içerik içermeyebilecek öğelerdir.) HTML5'te hala geçerli mi?

Kabul edilen boşluk elemanlarına bazı örnekler :

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

Reddedilen geçersiz öğelere bazı örnekler :

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

_{Not:
W3C validator aslında geçersiz kendiliğinden kapanan etiketleri kabul eder: yazarın basit bir yazım hatası ( \>yerine />) nedeniyle başlangıçta bir sorunu vardı ; ancak, kendiliğinden kapanan etiketler genel olarak HTML5'te% 100 geçerli değildir ve yanıtlar çeşitli HTML lezzetleri arasında kendiliğinden kapanan etiketler konusunda ayrıntılı olarak açıklanmaktadır.}

• In HTML 4 , <foo /(evet, hayır ile >hiç) vasıtasıyla <foo>(hangi yol açar <br />anlam <br>>(yani <br>&gt;) ve <title/hello/anlam <title>hello</title>). Bu, tarayıcıların destekleme konusunda çok kötü bir iş çıkardığı bir SGML kuralıdır ve teknik özellik , yazarlara sözdiziminden kaçınmalarını önerir .

• Gelen XHTML , <foo />anlamına gelir<foo></foo> . Bu, tüm XML belgeleri için geçerli olan bir XML kuralıdır. Bununla birlikte, XHTML genellikle text/html(en azından tarihsel olarak) tarayıcılar tarafından sunulan belgelerden farklı bir ayrıştırıcı kullanılarak işlenir application/xhtml+xml. W3C, XHTML olarak izlenecek uyumluluk yönergeleri sağlar text/html. (Temel olarak: Kendiliğinden kapanan etiket sözdizimini yalnızca öğe EMPTY olarak tanımlandığında (ve HTML etiketinde bitiş etiketi yasaklandığında) kullanın.

• Gelen HTML5 , anlamı <foo /> elemanının türüne bağlıdır .

  • Geçersiz öğeler olarak atanan HTML öğelerinde (temel olarak "HTML5'ten önce var olan ve herhangi bir içeriğe sahip olması yasaklanan bir öğe"), bitiş etiketleri basitçe yasaktır. Başlangıç ​​etiketinin sonundaki eğik çizgiye izin verilir, ancak hiçbir anlamı yoktur. Sadece XML bağımlısı insanlar (ve sözdizimi vurgulayıcılar) için sözdizimsel şekerdir.
  • Diğer HTML öğelerinde eğik çizgi bir hatadır, ancak hata kurtarma tarayıcıların bunu yok saymasına ve etiketi normal bir başlangıç ​​etiketi olarak ele almasına neden olur. Bu genellikle eksik bir bitiş etiketi ile sonuçlanır ve sonraki öğelerin kardeş yerine çocuk olmasına neden olur.
  • Yabancı elemanlar (SVG gibi XML uygulamalarından içe aktarılır) bunu kendiliğinden kapanan sözdizimi olarak görür.

Nikita Skvortsov'un belirttiği gibi, kendi kendine kapanan bir div geçerli olmayacak. Bunun nedeni, div'ın geçersiz bir öğe değil, normal bir öğe olmasıdır .

Göre HTML5 spec (diye bilinen herhangi içeriğe sahip olamaz, etiketleri boşluk elemanları ) kendi kendine kapanan * olabilir. Bu, aşağıdaki etiketleri içerir:

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

Yukarıdaki etiketlerde "/" tamamen isteğe bağlıdır, ancak bundan <img/>farklı değildir <img>, ancak <img></img>geçersizdir.

* Not: yabancı unsurlar da kendi kendine kapanabilir, ancak bu cevabın kapsamı içinde olduğunu düşünmüyorum.

Uygulamada, HTML'de kendi kendine kapanan etiketleri kullanmak, beklediğiniz gibi çalışmalıdır. Ancak , geçerli HTML5 yazma konusunda endişeleriniz varsa , bu tür etiketlerin kullanımının, kullanabileceğiniz iki farklı iki sözdizimi formunda nasıl davrandığını anlamalısınız. HTML5, benzer ancak özdeş olmayan bir HTML sözdizimini ve bir XHTML sözdizimini tanımlar. Hangisinin kullanılacağı web sunucusu tarafından gönderilen medya türüne bağlıdır.

Büyük olasılıkla, sayfalarınız text/htmldaha yumuşak HTML sözdizimini izleyen şekilde sunuluyor . Bu gibi durumlarda, HTML5 belirli başlangıç ​​etiketlerinin isteğe bağlı / sonlandırılmadan önce> olmasına izin verir. Bu durumlarda, / yani isteğe bağlı ve göz ardı olduğunu <hr>ve <hr />aynıdır. HTML özelliği bu "geçersiz öğeler" olarak adlandırılır ve geçerli olanların bir listesini verir. Kesin olarak, isteğe bağlı / yalnızca bu geçersiz öğelerin başlangıç ​​etiketleri içinde geçerlidir; örneğin <br />ve <hr />geçerli HTML5'tir, ancak <p />değildir.

HTML5 spesifikasyonu, HTML yazarları ve web tarayıcı geliştiricileri için neyin doğru olduğunu açıkça belirtir; ikinci grubun her türlü geçersiz "eski" sözdizimini kabul etmesi gerekir. Bu durumda, HTML5 uyumlu tarayıcıların kendi kendine kapalı etiketleri, örneğin <p />beklediğiniz gibi kabul edeceği ve beklediğiniz gibi oluşturduğu anlamına gelir. Ama bir yazar için, bu sayfa olur değil geçerli HTML5 olun. (Daha da önemlisi, bu tür yasadışı sözdizimini kullanarak elde ettiğiniz DOM ağacı ciddi şekilde bertaraf edilebilir; <span />örneğin, kendi kendine kapalı etiketler, işleri çok fazla karıştırmaya eğilimlidir ).

(Sunucunuzun XHTML dosyalarını XML MIME türü olarak nasıl göndereceğini bildiği olağandışı durumda, sayfanın XHTML DTD ve XML sözdizimiyle uyumlu olması gerekir .

HTML5 temel olarak sondaki eğik çizgi orada değil gibi davranır. HTML5 sözdiziminde kendi kendine kapanan bir etiket diye bir şey yoktur.

• Etiketleri Otomatik kapanan olmayan boşluk gibi unsurların <p/>, <div/>hiç iş olmaz. Sondaki eğik çizgi yoksayılır ve bunlar açılış etiketleri olarak kabul edilir. Bu muhtemelen yuvalama sorunlarına yol açacaktır.

  Bu, eğik çizginin önünde boşluk olup olmadığına bakılmaksızın doğrudur: <p />ve <div />aynı nedenden dolayı çalışmaz.

• Etiketleri Otomatik kapanan boşluk gibi elementler <br/>veya <img src="" alt=""/> olacaktır çalışır, ancak eğik çizgi göz ardı edilir çünkü sadece ve doğru davranışlara neden olur bu durumda.

Sonuç olarak, eski "XHTML 1.0'da metin / html olarak görev yapan" herhangi bir şey daha önce olduğu gibi çalışmaya devam edecektir: geçersiz olmayan etiketlerde sondaki eğik çizgiler orada kabul edilmezken, boş öğelerdeki sondaki eğik çizgi işe yaramaz.

Bir not daha: HTML5 belgesini XML olarak temsil etmek mümkündür ve bu bazen "XHTML 5.0" olarak adlandırılır. Bu durumda, XML kuralları uygulanır ve kendi kendine kapanan etiketler her zaman işlenir. Her zaman bir XML mime türü ile sunulması gerekir.

Kendiliğinden kapanan etiketler HTML5'te geçerlidir, ancak zorunlu değildir.

<br>ve <br />ikisi de iyi.

Bu örnekte gösterildiği gibi, kendiliğinden kapanan etiketlerle çok dikkatli olurum:

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

Bağırsak hislerim <span></span><span></span>bunun yerine

Ancak -sadece kayıt için- bu geçersiz:

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

Ve burada bir eğik çizgi tekrar geçerli kılar:

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