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


669

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.


2
@Ben: och, przepraszam, myślę, że masz rację. W tym przypadku źle zrozumiałem pierwotne pytanie, myślałem, że OP chce wiedzieć, czy tagi samozamykające są w ogóle prawidłowe w HTML5. Ale to oznacza, że ​​właśnie napisał literówki w swoim kodzie lub nie wiedział, jak odpowiednio pisać samozamykające się tagi, co ma sens, że weryfikator W3C oznaczył swój kod jako nieprawidłowy.
Sk8erPeter,

16
Aby zaoszczędzić czas dla przyszłych czytelników: tak, składnia w pytaniu jest niepoprawna i nie, nie należy jej zmieniać. PO wyraźnie i słusznie wyjaśnił, dlaczego . Ponieważ spowodowało to błędy sprawdzania poprawności, które skłoniły to pytanie, składnia nie powinna być poprawiana.
Jordan Gray

2
Czy wy, ludzie, wciąż walczycie, w którą stronę powinny być skierowane cięcia? Daj spokój.
BoltClock

3
@BoltClock Tak, nadal walczę. Faceci: jeśli pytanie dotyczyło tego pytania \>, powinno zostać zamknięte jako bezużyteczne pytanie typu „popraw moją literówkę”. Odpowiedzi na wszystkie adresy />. />Wersja jest przydatna tylko jeden. Niech będzie.
Gilles „SO- przestań być zły”

1
Następnie pytanie musi zostać przeredagowane, ponieważ walidator W3C faktycznie akceptuje samozamykające się tagi. Trudno jest przeredagować pytanie w taki sposób, nie naruszając jego integralności w stosunku do pierwotnych zamiarów. Dlatego jeśli chcemy przestrzegać zasad SO, możemy być zmuszeni do poświęcenia jasności w takich pytaniach, jak to, chociaż wydaje się, że edytowanie pytania jest jedyną rozsądną rzeczą do zrobienia, ze względu na większe dobro średni. Możemy rozpocząć kolejną dyskusję na temat meta, jeśli istnieje wiele innych pytań na podobny temat.
osa

Odpowiedzi:


1238
  • 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ą.

24
... którzy są uzależnieni od XML. ”. Wydaje się, że sugerujesz, że zgodność XML jest zła. Jednak końcowym efektem HTML5 wydaje się być to, że i tak musimy poradzić sobie z nawiasami kątowymi (tj. Z większością niedogodności związanych z XML), podczas gdy utrudnia to korzystanie z narzędzi opartych na XML (np. Narzędzi szablonów lub różnych procesorów ). Nawet z generacyjnego punktu widzenia wydaje się, że <object data="..." />i <img src="..."></src>nie są OK, a są <object data="..."></object>i <img src="..." />są, co utrudnia spójność narzędzi. To wygląda na sytuację przegranej.
Bruno

7
@Bruno - HTML poprzedza XML. Próby nakłonienia ludzi do przejścia na XHTML nie powiodły się. Dzięki text/html, przeglądarki nie nadają slashowi żadnego specjalnego znaczenia, więc włączenie go nie ma żadnego praktycznego celu. Jest tylko po to, aby wyglądać bardziej jak XML dla osób, które nie mogą wyjść z nawyku.
Quentin

6
@Quentin Nie do końca się nie zgadzam. Trochę szkoda, że ​​prawidłowy odpowiednik XML niekoniecznie musi być prawidłowym HTML5 (np. <img ...></img>Zamiast <img ...>lub <img ... />). Ponieważ HTML5 jest ogólnie mniej rygorystyczny (być może dlatego XHTML zawiódł), mógł bardzo dobrze tolerować coś takiego <img ...></img>. Niestety tak nie jest, więc generator szablonów oparty na języku XML musi wiedzieć, jak rozróżnić produkcję pustych elementów lub elementów samozamykających się: nie można mieć nawet jednej reguły, aby napisać wszystkie puste elementy jako <tag></tag>.
Bruno

3
XHTML zawiodły przed HTML 5 był nawet na horyzoncie, i nie można od dawna tworzą pustych elementów, ponieważ przeglądarka korekcji błędów, które poprzedzały XHTML by robić takie rzeczy jak traktowanie </br>jako <br>tak <br></br>byłaby podwójna przerwa linia. (i wsteczna kompatybilność ze złymi znacznikami w świecie rzeczywistym (jak </br>) jest jednym z celów projektowych HTML 5).
Quentin

1
FROM W3C: Puste elementy: obszar, podstawa, br, col, osadzanie, hr, img, input, keygen, link, meta, param, source, track, wbr "Puste elementy mają tylko znacznik początkowy; nie można określać znaczników końcowych dla pustych elementów. ” w3.org/TR/html5/syntax.html#void-elements
Fabio Nolasco

406

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.


1
Narzędzia programistyczne IE10 dają mi „HTML1500: Tag nie może być samozamykający. Użyj jawnego tagu zamykającego”. na linii <meta charset = "UTF-8" /> Wiesz, dlaczego tak by było?
James w Indy,

Ok, dowiedziałem się, że samozamykające się tagi nie powinny mieć ukośnika (a usunięcie go naprawia mój błąd). Cytuj: tiffanybbrown.com/2011/03/23/…
James in Indy

Specyfikacja się zmieniła. Teraz elementy „void” lub „samozamykające się” nie powinny zawierać ukośnika, gdy są podawane jako typ HTML 5. Jeśli jednak jest obsługiwany jako XHTML, może być wymagany ukośnik zamykający (w tym przypadku sprawdź dokumentację). W praktyce strony będą zwykle wyświetlane zgodnie z oczekiwaniami, nawet jeśli zamknięcie /zostało uwzględnione, ale nie jest to żadna zmiana (zależy to od przeglądarki, która ponownie przepisuje kod za Ciebie i interpretuje go zgodnie z zamierzeniami). z jakiegoś powodu twoja strona musi przejść walidację HTML 5, może nie przejść, jeśli zamkniesz tagi dla pustych elementów.
SherylHohman

Jeśli chodzi o komentarz @ SherylHohman, nie wierzę, że specyfikacja się zmieniła (a jeśli tak, to zmieniła się z powrotem). Zobacz w3.org/TR/html5/syntax.html#start-tags (8.1.2.1.6) - puste elementy (lub obce) mogą nadal zawierać ukośnik.
ChrisC,

63

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 ).


31
<p /> będzie traktowany jako tag otwierający, a nie tag samozamykający. Oznacza to, że cała pozostała część dokumentu będzie traktowana jako część elementu P. Nie tego „prawdopodobnie oczekuję” i spowoduje poważny bałagan na każdej nietrywialnej stronie.
mhsmith

12

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.


4

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

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


12
Zgodnie ze specyfikacją HTML5, składni samozamykającej ( />) nie można używać w nie HTML-owym elemencie HTML.
naXa

2
Pytanie dotyczyło samozamykających się tagów na nie-pustych elementach , takich jak <p/>lub <div/>.
thomasrutter

2
Początkowo pytanie nie dotyczyło konkretnie elementów nieważnych. To było bardziej, czy możesz nadal używać <... />jak w XHTML lub czy musisz usunąć /w HTML5. Pytanie zostało zmienione wiele razy później.
Nick

Tak czy inaczej, odpowiedź jest taka, że ​​ukośnik zostanie zignorowany, co spowoduje uszkodzenie elementów niezadeklarowanych jako nieważne, ale będzie kompatybilnych z elementami nieważnymi.
thomasrutter,

4

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


2
Jest to opisane w zaakceptowanej odpowiedzi:On other [than void] HTML elements, the slash is an error, but error recovery will cause browsers to ignore it and treat the tag as a regular start tag. This will usually end up with a missing end tag causing subsequent elements to be children instead of siblings.
Palec

-1

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"/>

1
To dlatego, że svg jest napisane w formacie XML, a nie HTML. Wykorzystuje różne zasady analizy
Electric Coffee
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.