¿Cuáles son todos los elementos de cierre automático válidos en XHTML (implementado por los principales navegadores)?

¿Cuáles son todos los elementos de cierre automático válidos (p. Ej., <br/>) en XHTML (implementado por los principales navegadores)?

Sé que XHTML técnicamente permite que cualquier elemento se cierre automáticamente, pero estoy buscando una lista de esos elementos compatibles con todos los principales navegadores. Consulte http://dusan.fora.si/blog/self-closing-tags para ver ejemplos de algunos problemas causados ​​por elementos de cierre automático como <div />.

Todos los navegadores que admiten XHTML (Firefox, Opera, Safari, IE9 ) admiten sintaxis de cierre automático en cada elemento .

<div/>, <script/>, <br></br>Todo debería funcionar bien. Si no lo hacen, entonces tiene HTML con XHTML DOCTYPE agregado de manera inapropiada.

DOCTYPE no cambia la forma en que se interpreta el documento. Solo el tipo MIME lo hace .

Decisión del W3C sobre ignorar DOCTYPE :

El HTML WG ha discutido este problema: la intención era permitir que los navegadores antiguos (solo HTML) acepten documentos XHTML 1.0 siguiendo las pautas y sirviéndolos como texto / html. Por lo tanto, los documentos servidos como texto / html deben tratarse como HTML y no como XHTML.

Es una trampa muy común, porque el Validador W3C ignora en gran medida esa regla, pero los navegadores la siguen religiosamente. Lea Comprensión de HTML, XML y XHTML del blog de WebKit:

De hecho, la gran mayoría de los documentos supuestamente XHTML en Internet se sirven como text/html. Lo que significa que no son XHTML en absoluto, sino HTML no válido que se está solucionando con el manejo de errores de los analizadores HTML. Todos esos "Valid XHTML 1.0!" los enlaces en la web realmente dicen "HTML no válido 4.01!".

Para probar si tiene XHTML real o HTML no válido con DOCTYPE de XHTML, coloque esto en su documento:

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

Valida, y en XHTML real funciona perfectamente (ver: 1 vs 2 ). Si no puede creer lo que ve (o no sabe cómo configurar los tipos MIME), abra su página a través del proxy XHTML .

Otra forma de verificar es ver la fuente en Firefox. Destacará las barras en rojo cuando no sean válidas.

En HTML5 / XHTML5 esto no ha cambiado, y la distinción es aún más clara, porque ni siquiera tiene más DOCTYPE. Content-Typees el rey

Para el registro, la especificación XHTML permite que cualquier elemento se cierre automáticamente al hacer de XHTML una aplicación XML : [énfasis mío]

Las etiquetas de elementos vacíos se pueden usar para cualquier elemento que no tenga contenido , se declare o no usando la palabra clave VACÍO.

También se muestra explícitamente en la especificación XHTML :

Los elementos vacíos deben o bien tener una etiqueta de cierre o la etiqueta de inicio debe terminar con />. Por ejemplo, <br/>o<hr></hr>

Un elemento a tener mucho cuidado con este tema es el <scriptelemento>. Si tiene un archivo fuente externo, causará problemas cuando lo cierre. Intentalo:

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

Esto funcionará en Firefox, pero se rompe en IE6 al menos. Lo sé, porque me encontré con esto cuando cerré demasiado celosamente cada elemento que vi ;-)

La sintaxis de cierre automático funciona en todos los elementos en application / xhtml + xml. No es compatible con ningún elemento en text / html, pero los elementos que están "vacíos" en HTML4 o "void" en HTML5 no toman una etiqueta final de todos modos, por lo que si coloca una barra diagonal en ellos, parece que Se admitió la sintaxis de cierre automático.

Desde el sitio de referencia de W3 Schools :

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

La mejor pregunta sería: ¿qué etiquetas pueden cerrarse automáticamente incluso en modo HTML sin afectar el código? Respuesta: solo aquellos que tienen contenido vacío (son nulos). De acuerdo con las especificaciones HTML, los siguientes elementos son nulos:

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

La versión anterior de la especificación también figura en la lista command. Además, según diversas fuentes, las siguientes etiquetas obsoletas o no estándar son nulas:

basefont, bgsound, frame, isindex

Espero que esto ayude a alguien:

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

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

¿Qué hay de <meta>y <link>? ¿Por qué no están en esa lista?

Como regla general, no cierre automáticamente ningún elemento que tenga la intención de tener contenido, porque definitivamente causará problemas al navegador tarde o temprano.

Los que son de cierre automático, como <br>y <img>, deberían ser obvios. Los que no lo son ... ¡simplemente no los cierren!

La última vez que verifiqué, los siguientes fueron los elementos vacíos / vacíos enumerados en HTML5.

Válido para autores: area, base, br, col, command, embed, eventsource, hr, img, input, link, meta, param, source

Inválido para autores: basefont, bgsound, frame, spacer, wbr

Además de los pocos que son nuevos en HTML5, eso debería darle una idea de los que podrían ser compatibles al servir XHTML como texto / html. (Solo pruébelos examinando el DOM producido).

En cuanto a XHTML servido como application / xhtml + xml (lo que lo convierte en XML), se aplican las reglas XML y cualquier elemento puede estar vacío (a pesar de que XHTML DTD no puede expresar esto).

Debes echar un vistazo a los DTD xHTML , todos están listados. Aquí hay una revisión rápida de todos los principales:

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

Se llaman elementos "nulos" en HTML 5. Están listados en la especificación oficial de W3 .

Un elemento vacío es un elemento cuyo modelo de contenido nunca le permite tener contenido bajo ninguna circunstancia.

A partir de abril de 2013, son:

área, base, br, col, comando, incrustar, hr, img, input, keygen, enlace, meta, param, fuente, pista, wbr

A diciembre de 2018 (HTML 5.2), son:

área, base, br, col, incrustar, hr, img, entrada, enlace, meta, parámetro, fuente, pista, wbr

Otro problema de etiqueta de cierre automático para IE es el elemento de título. Cuando IE (solo lo probé en IE7) ve esto, le presenta al usuario una página en blanco. Sin embargo, "ves la fuente" y todo está ahí.

<title/>

Originalmente vi esto cuando mi XSLT generó la etiqueta de cierre automático.

No voy a tratar de trabajar demasiado en esto, especialmente porque la mayoría de las páginas que escribo se generan o la etiqueta tiene contenido. Los únicos dos que me han causado problemas al hacer que se cierren automáticamente son:

<title/>

Para esto, simplemente he recurrido a darle siempre una etiqueta de cierre separada, ya que una vez que está allí, en <head></head>realidad no hace que su código sea más desordenado para trabajar de todos modos.

<script/>

Este es el grande con el que recientemente tuve problemas. Durante años, siempre había usado <script/>etiquetas de cierre automático cuando el script proviene de una fuente externa. Pero recientemente comencé a recibir mensajes de error de JavaScript sobre un formulario nulo. Después de varios días de investigación, descubrí que el problema era (supuestamente) que el navegador nunca estaba llegando a la <form>etiqueta porque no se daba cuenta de que era el final de la <script/>etiqueta. Entonces, cuando lo hice en <script></script>etiquetas separadas , todo funcionó. No sé por qué es diferente en las diferentes páginas que hice en el mismo navegador, ¡pero fue un gran alivio encontrar la solución!

<hr /> es otro