Czy (nieważne) samozamykające się tagi są prawidłowe w HTML5?

W3C walidator nie jak znaczniki samozamykające (tych, które kończą się " />„) na zakaz pustych elementów. (Puste elementy to takie, które nigdy nie mogą zawierać żadnej zawartości.) Czy nadal są prawidłowe w HTML5?

Niektóre przykłady zaakceptowanych pustych elementów:

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

Niektóre przykłady odrzuconych elementów nieważnych:

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

Uwaga: walidator W3C faktycznie akceptuje nieważne samozamykające się tagi: autor pierwotnie miał problem z powodu prostej literówki (\>zamiast/>); jednak samozamykające się tagi nie są w 100% poprawne w HTML5, a odpowiedzi zawierają szczegółowe informacje na temat samozamykających się tagów w różnych smakach HTML.

• W HTML 4 , <foo /(tak, ze nie ma >w ogóle) środków <foo>(co prowadzi do <br />co oznacza <br>>(tj <br>&gt;) i <title/hello/sens <title>hello</title>). Jest to reguła SGML, że przeglądarki bardzo słabo wspierają obsługę, a specyfikacja radzi autorom, aby unikali składni .

• W XHTML , <foo />oznacza<foo></foo> . Jest to reguła XML, która ma zastosowanie do wszystkich dokumentów XML. To powiedziawszy, XHTML jest często obsługiwany jako text/html(przynajmniej historycznie) przetwarzany przez przeglądarki wykorzystujące inny parser niż dokumenty obsługiwane jako application/xhtml+xml. W3C zapewnia wytyczne dotyczące zgodności dla XHTML as text/html. (Zasadniczo: używaj składni tagów samozamykających się tylko wtedy, gdy element jest zdefiniowany jako PUSTY (a znacznik końcowy był zabroniony w specyfikacji HTML)).

• W HTML5 znaczenie <foo /> zależy od typu elementu .

  • Na elementach HTML oznaczonych jako elementy puste (zasadniczo „Element, który istniał przed HTML5 i który nie mógł mieć żadnej zawartości”), znaczniki końcowe są po prostu zabronione. Ukośnik na końcu znacznika początkowego jest dozwolony, ale nie ma znaczenia. To tylko cukier syntaktyczny dla ludzi (i zakreślaczy składni), którzy są uzależnieni od XML.
  • W przypadku innych elementów HTML ukośnik jest błędem, ale odzyskiwanie po błędzie spowoduje, że przeglądarki go zignorują i będą traktować znacznik jako zwykły znacznik początkowy. Zwykle kończy się to brakującym znacznikiem końcowym, co powoduje, że kolejne elementy są dziećmi zamiast rodzeństwa.
  • Elementy obce (importowane z aplikacji XML, takich jak SVG) traktują go jako składnię samozamykającą.

Jak zauważył Nikita Skvortsov, samozamykający div nie będzie sprawdzał. Wynika to z faktu, że div jest elementem normalnym , a nie pustym .

Zgodnie ze specyfikacją HTML5 tagi, które nie mogą zawierać żadnej zawartości (znane jako elementy void ), mogą się samozamykać *. Obejmuje to następujące tagi:

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

„/” Jest całkowicie opcjonalny w powyższych znacznikach, więc <img/>nie różni się od <img>, ale<img></img> jest nieprawidłowy.

* Uwaga: elementy obce mogą się również samozamykać, ale nie sądzę, że jest to możliwe w przypadku tej odpowiedzi.

W praktyce używanie tagów samozamykających w HTML powinno działać tak, jak można się spodziewać. Ale jeśli martwisz się o prawidłowe pisanie HTML5, powinieneś zrozumieć, jak zachowuje się użycie takich tagów w dwóch różnych dwóch 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óre zostanie użyte, zależy od typu nośnika wysłanego przez serwer WWW.

Bardziej niż prawdopodobne, Twoje strony są wyświetlane jako text/html, zgodnie z bardziej łagodną składnią HTML. W takich przypadkach HTML5 pozwala, aby niektóre tagi początkowe miały opcjonalne / przed zakończeniem>. W tych przypadkach, / jest opcjonalny i ignorowane, tak <hr>i <hr />są identyczne. Specyfikacja HTML nazywa te „puste elementy” i podaje listę poprawnych. Ściśle mówiąc, opcjonalne / jest ważne tylko w tagach początkowych tych pustych elementów; na przykład <br />i <hr />są poprawne HTML5, ale <p />nie jest.

Specyfikacja HTML5 wyraźnie rozróżnia to, co jest poprawne dla autorów HTML i twórców przeglądarek internetowych, przy czym druga grupa musi akceptować wszelkiego rodzaju niepoprawną składnię „starszą”. W tym przypadku oznacza to, że przeglądarki zgodne z HTML5 zaakceptują nielegalne samozamykające się tagi, takie jak<p /> i renderować je tak, jak zapewne się spodziewasz. Ale dla autora ta strona nie byłaby poprawna HTML5. (Co ważniejsze, drzewo DOM można uzyskać z użyciem tego rodzaju nielegalnej składni można poważnie spieprzył; własny zamknięty <span />tagi, na przykład, mają tendencję do rzeczy bałagan dużo ).

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

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

• Samozamykające się znaczniki na nie-pustych elementach, takich jak <p/>, w <div/>ogóle nie będą działać. Końcowy ukośnik zostanie zignorowany, a będą one traktowane jako otwierające tagi. Może to prowadzić do problemów z zagnieżdżaniem.

  Dzieje się tak niezależnie od tego, czy przed ukośnikiem znajduje się spacja: <p />i <div />również nie działa z tego samego powodu.

• Samozamykające się tagi w pustych elementach takich jak <br/>lub <img src="" alt=""/> będą działać, ale tylko dlatego, że ukośnik końcowy jest ignorowany, aw tym przypadku dzieje się tak, że skutkuje poprawnym zachowaniem.

W rezultacie wszystko, co działało w twoim starym „XHTML 1.0 podanym jako text / html”, będzie działało tak jak wcześniej: końcowe ukośniki na nie-pustych znacznikach również nie zostały tam zaakceptowane, podczas gdy końcowe ukośniki na pustych elementach działały.

Jeszcze jedna uwaga: możliwe jest reprezentowanie dokumentu HTML5 jako XML, który jest czasem nazywany „XHTML 5.0”. W takim przypadku obowiązują reguły XML i tagi samozamykające będą zawsze obsługiwane. Zawsze musi być obsługiwany z typem XML MIME.

Tagi samozamykające są prawidłowe w HTML5, ale nie są wymagane.

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

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

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

<span></span><span></span>Zamiast tego miałbym przeczucie

Jednak - tylko dla zapisu - jest to nieprawidłowe:

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

A ukośnik sprawiłby, że znów byłby ważny:

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