Jakie są wszystkie prawidłowe samozamykające się elementy w XHTML (zaimplementowane przez główne przeglądarki)?

Jakie są wszystkie prawidłowe elementy samozamykające (np. <br/>) w XHTML (zaimplementowane przez główne przeglądarki)?

Wiem, że technicznie XHTML pozwala na samozamykanie dowolnego elementu, ale szukam listy tych elementów obsługiwanych przez wszystkie główne przeglądarki. Zobacz http://dusan.fora.si/blog/self-closing-tags, aby zapoznać się z przykładami niektórych problemów spowodowanych przez samozamykające się elementy, takie jak <div />.

Każda przeglądarka obsługująca XHTML (Firefox, Opera, Safari, IE9 ) obsługuje samozamykającą się składnię każdego elementu .

<div/>, <script/>, <br></br>Wszystko powinno działać dobrze. Jeśli tak nie jest, masz HTML z nieprawidłowo dodanym XHTML DOCTYPE.

DOCTYPE nie zmienia sposobu interpretacji dokumentu. Tylko typ MIME tak .

Decyzja W3C o ignorowaniu DOCTYPE :

Grupa robocza ds. HTML omówiła ten problem: zamiarem było umożliwienie starym przeglądarkom (obsługującym tylko HTML) akceptowanie dokumentów XHTML 1.0 zgodnie z wytycznymi i udostępnianie ich jako tekst / html. Dlatego dokumenty podawane jako tekst / html powinny być traktowane jako HTML, a nie jako XHTML.

To bardzo powszechna pułapka, ponieważ W3C Validator w dużej mierze ignoruje tę zasadę, ale przeglądarki przestrzegają jej religijnie. Przeczytaj artykuł Understanding HTML, XML i XHTML z bloga WebKit:

W rzeczywistości zdecydowana większość rzekomo XHTML dokumentów w Internecie jest obsługiwana jako text/html. Co oznacza, że ​​nie są w ogóle XHTML, ale w rzeczywistości nieprawidłowym HTML, który radzi sobie z obsługą błędów parserów HTML. Wszystkie te „Valid XHTML 1.0!” linki w sieci naprawdę mówią „Nieprawidłowy HTML 4.01!”.

Aby sprawdzić, czy masz prawdziwy XHTML lub nieprawidłowy HTML z DOCTYPE XHTML, umieść to w swoim dokumencie:

<span style="color:green"><span style="color:red"/> 
 If it's red, it's HTML. Green is XHTML.
</span>

Sprawdza, aw prawdziwym XHTML działa doskonale (zobacz: 1 vs 2 ). Jeśli nie możesz uwierzyć własnym oczom (lub nie wiesz, jak ustawić typy MIME), otwórz swoją stronę przez serwer proxy XHTML .

Innym sposobem sprawdzenia jest wyświetlenie źródła w przeglądarce Firefox. Podświetli ukośniki na czerwono, gdy są nieprawidłowe.

W HTML5 / XHTML5 to się nie zmieniło, a różnica jest jeszcze wyraźniejsza, ponieważ nie masz nawet dodatkowych DOCTYPE. Content-Typejest królem.

Dla przypomnienia, specyfikacja XHTML pozwala na samozamykanie dowolnego elementu poprzez uczynienie XHTML aplikacji XML : [wyróżnienie moje]

Znaczniki pustego elementu mogą być używane dla dowolnego elementu, który nie ma treści , niezależnie od tego, czy został zadeklarowany przy użyciu słowa kluczowego EMPTY.

Jest to również wyraźnie pokazane w specyfikacji XHTML :

Puste elementy muszą albo posiadać znacznik końcowy lub znacznik początkowy musi kończyć się />. Na przykład <br/>lub<hr></hr>

Jednym z elementów, z którymi należy być bardzo ostrożnym w tym temacie, jest <scriptelement>. Jeśli masz zewnętrzny plik źródłowy, spowoduje to problemy podczas samodzielnego zamykania. Spróbuj:

<!-- this will not consistently work in all browsers! -->
<script type="text/javascript" src="external.js" />

To zadziała w Firefoksie, ale psuje się przynajmniej w IE6. Wiem, bo wpadłem na to, nadgorliwie samozamykając każdy element, który zobaczyłem ;-)

Składnia samozamykająca działa na wszystkich elementach w application / xhtml + xml. Nie jest obsługiwany w żadnym elemencie w tekście / html, ale elementy, które są „puste” w HTML4 lub „void” w HTML5 i tak nie przyjmują tagu końcowego, więc jeśli umieścisz na nich ukośnik, wygląda to tak, jakby obsługiwana była samozamykająca się składnia.

Ze strony referencyjnej W3 Schools :

<area />
<base />
<basefont />
<br />
<hr />
<input />
<img />
<link />
<meta />

Lepszym pytaniem byłoby: jakie tagi można samozamykać nawet w trybie HTML bez wpływu na kod? Odpowiedź: tylko te, które mają pustą treść (są nieważne). Zgodnie ze specyfikacją HTML następujące elementy są nieważne:

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

Podano również starszą wersję specyfikacji command. Poza tym, według różnych źródeł, następujące nieaktualne lub niestandardowe tagi są nieważne:

basefont, bgsound, frame, isindex

Mam nadzieję, że to komuś pomoże:

<base />
<basefont />
<frame />
<link />
<meta />

<area />
<br />
<col />
<hr />
<img />
<input />
<param />

A co z <meta>i <link>? Dlaczego nie ma ich na tej liście?

Praktyczna zasada, nie zamykaj samoczynnie żadnego elementu, który ma mieć treść, ponieważ z pewnością wcześniej czy później spowoduje to problemy z przeglądarką.

Te, które z natury zamykają się samoczynnie, jak <br>i <img>, powinny być oczywiste. Te, które nie są ... po prostu ich nie zamykaj!

Kiedy ostatnio sprawdzałem, następujące elementy były puste / void wymienione w HTML5.

Obowiązuje dla autorów: area, base, br, col, command, embed, eventsource, hr, img, input, link, meta, param, source

Nieprawidłowe dla autorów: basefont, bgsound, frame, spacer, wbr

Poza kilkoma nowościami w HTML5, powinno to dać ci wyobrażenie o tych, które mogą być obsługiwane podczas obsługi XHTML jako text / html. (Po prostu przetestuj je, sprawdzając wyprodukowany DOM).

Jeśli chodzi o XHTML obsługiwany jako application / xhtml + xml (co sprawia, że ​​jest to XML), obowiązują reguły XML i każdy element może być pusty (nawet jeśli XHTML DTD nie może tego wyrazić).

Powinieneś rzucić okiem na DTD xHTML , wszystkie są wymienione. Oto krótki przegląd wszystkich głównych:

<br />
<hr />
<img />
<input />

W HTML 5 nazywane są elementami „void”. Są one wymienione w oficjalnej specyfikacji W3 .

Element void to element, którego model treści nigdy nie pozwala na posiadanie zawartości w żadnych okolicznościach.

Od kwietnia 2013 r. Są to:

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

Od grudnia 2018 r. (HTML 5.2) są to:

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

Innym problemem dotyczącym samozamykających się tagów w IE jest element tytułu. Kiedy IE (właśnie wypróbowałem to w IE7) widzi to, wyświetla użytkownikowi pustą stronę. Jednak „przeglądasz źródło” i wszystko tam jest.

<title/>

Pierwotnie widziałem to, kiedy mój XSLT wygenerował samozamykający się tag.

Nie będę się nad tym rozwodził, zwłaszcza że większość stron, które piszę, jest generowana lub tag zawiera treść. Jedyne dwa, które sprawiły mi kłopoty przy ich samozamykaniu, to:

<title/>

W tym celu po prostu uciekałem się do nadawania mu oddzielnego tagu zamykającego, ponieważ gdy już znajdzie się w tagu, <head></head>tak naprawdę nie powoduje to bałaganu w kodzie.

<script/>

Jest to duży problem, z którym ostatnio miałem problemy. Od lat zawsze używałem samozamykających się <script/>tagów, gdy skrypt pochodzi z zewnętrznego źródła. Ale bardzo niedawno zacząłem otrzymywać komunikaty o błędach JavaScript dotyczące formularza pustego. Po kilku dniach poszukiwań odkryłem, że problem polegał (podobno) na tym, że przeglądarka nigdy nie docierała do <form>tagu, ponieważ nie zdawała sobie sprawy, że to koniec <script/>tagu. Więc kiedy stworzyłem osobne <script></script>tagi, wszystko działało. Dlaczego różni się na różnych stronach, które stworzyłem w tej samej przeglądarce, nie wiem, ale znalezienie rozwiązania było wielką ulgą!

<hr /> to kolejny