Czy znaczniki samozamykające się są ważne w HTML5?

Jak zauważył Nikita Skvortsov, samozamykający się div nie będzie sprawdzał poprawności. To dlatego, że div jest elementem normalnym , a nie elementem pustym.

Zgodnie z specyfikacją HTML5, znaczniki, które nie mogą mieć żadnej zawartości (znane jako void elements), mogą być samozamykające się*. Obejmuje to następujące tagi:

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

" / " jest całkowicie opcjonalne dla powyższych tagów, więc {[1] } nie różni się od <img>, ale <img></img> jest niepoprawne.

*Uwaga: obce elementy mogą być również samozamykające się, ale nie sądzę, aby to było w zasięgu tej odpowiedzi.

W praktyce używanie samozamykających się znaczników w HTML powinno działać tak, jak można się tego spodziewać. Ale jeśli martwisz się o pisanie valid HTML5, powinieneś zrozumieć, jak używanie takich znaczników zachowuje się w dwóch różnych formach składni, których możesz użyć. HTML5 definiuje zarówno składnię HTML, jak i składnię XHTML, które są podobne, ale nie identyczne. To, który z nich zostanie użyty, zależy od typu nośnika przesłanego przez serwer WWW.

Bardziej niż prawdopodobne, Twoje strony są serwowane jako text/html, które postępuje zgodnie z łagodniejszą składnią HTML. W takich przypadkach HTML5 pozwala niektórym znacznikom startowym na opcjonalne / przed zakończeniem >. W takich przypadkach / jest opcjonalne i ignorowane, więc <hr> i <hr /> są identyczne. Specyfikacja HTML nazywa te "puste elementy" i podaje listę ważnych elementów. Ściśle mówiąc, opcjonalne / jest ważne tylko w znacznikach startowych tych pustych elementów; na przykład, <br /> i {[2] } są poprawne HTML5, ale <p /> nie jest.

Specyfikacja HTML5 jasno rozróżnienie między tym, co jest poprawne dla autorów HTML i dla twórców przeglądarek internetowych, przy czym druga grupa jest zobowiązana do zaakceptowania wszystkich rodzajów nieprawidłowej "starszej" składni. W tym przypadku oznacza to, że przeglądarki zgodne z HTML5 będą akceptować nielegalne samozamykające się znaczniki, takie jak <p />, i renderować je zgodnie z oczekiwaniami. Ale dla autora ta strona byłaby , a nie prawidłowym HTML5. (Co ważniejsze, Drzewo DOM, które uzyskasz z używania tego rodzaju nielegalnej składni, może być poważnie spieprzone; samo-zamknięte <span /> tagi, na przykład, mają tendencję do bałagan rzeczy dużo ).

(w nietypowym przypadku, gdy twój serwer wie, jak wysyłać pliki XHTML jako typ MIME XML, strona musi być zgodna ze składnią XHTML DTD i XML. Oznacza to, że znaczniki samozamykające są wymagane dla elementów zdefiniowanych jako takie.)

HTML5 zasadniczo zachowuje się tak, jakby nie było końcowego ukośnika. Nie ma czegoś takiego jak samozamykający się znacznik w składni HTML5.

• Samozamykające się znaczniki na non-void elementy takie jak <p/>, <div/> nie zadziała. Końcowy ukośnik będzie ignorowany, a te będą traktowane jako znaczniki otwierające. Może to prowadzić do problemów z gniazdowaniem.

  To prawda, niezależnie od tego, czy przed ukośnikiem znajduje się Spacja: <p /> i <div /> również nie będą działać dla z tego samego powodu.

• Samozamykające się znaczniki na void elementy takie jak <br/> lub <img src="" alt=""/> będzie działać, ale tylko dlatego, że końcowy Ukośnik jest ignorowany i w tym przypadku powoduje to prawidłowe zachowanie.

Rezultatem jest to, że wszystko, co działało w Twoim starym "XHTML 1.0 served as text / html"będzie nadal działać tak, jak wcześniej: końcowe ukośniki na znacznikach nie-void również nie zostały tam zaakceptowane, podczas gdy końcowy ukośnik na elementach void zadziałało.

Jeszcze jedna uwaga: możliwe jest reprezentowanie dokumentu HTML5 jako XML, a to jest czasami nazywane "XHTML 5.0". W tym przypadku stosuje się reguły XML, a znaczniki samozamykające się zawsze będą obsługiwane. Zawsze musi być obsługiwany z typem mime XML.

Samozamykające się znaczniki są ważne w HTML5, ale nie są wymagane.

<br> i <br /> są w porządku.

Byłbym bardzo ostrożny z samozamykającymi się tagami, jak pokazuje ten przykład:

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

Moje przeczucie byłoby <span></span><span></span> zamiast

Jednak-tak dla przypomnienia - jest to niepoprawne:

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

I Ukośnik tutaj sprawi, że znów będzie ważny:

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