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


188

¿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 />.


77
¿No se trata de uno de los propósitos de XHTML? Pensé que una de las ventajas de XHTML era que podía usar un generador XML para generar HTML. ¿Por qué cualquier generador XML sería consciente de qué etiquetas pueden cerrarse automáticamente? Muy raro.
Elijah

66
La razón por la que se aceptó la respuesta "cojo", "incorrecto" es porque respondió a la pregunta que obviamente estaba haciendo kamens. Quería saber qué elementos podrían cerrarse automáticamente al servir XHTML como texto / html sin causar problemas de representación en los navegadores. Muchas páginas están escritas en XHTML y se sirven como texto / html aunque sea técnicamente incorrecto. La pregunta podría mejorarse con esta aclaración, pero responder una pregunta diferente (qué sucede cuando sirve como aplicación / xml, o si las etiquetas singulares en texto / html deberían tener un cierre /) no es útil en este caso.
Nick Lockwood

Respuestas:


180

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>


77
No es correcto afaik, porque el uso de versiones de cierre automático <script>o <div>resultados en interpretación / interpretación diferente
ZeissS

13
@ZeissS solo en text/html. En XHTML real, enviado ya application/xhtml+xmlque funciona bien. Lea el artículo al que me vinculé (o el apéndice C de la especificación XHTML) antes de votar en contra.
Kornel

3
@pornel, ¿puede garantizar que las etiquetas <script /> de cierre automático funcionarán en navegadores antiguos? No lo creo. Suena autoritario, y la mayoría de su información es precisa, pero la experiencia me dice que las etiquetas de secuencia de comandos de cierre automático serán problemáticas y es mejor evitarlas por completo en lugar de causar dolor de cabeza.
Metagrapher

66
@Metagrapher si los navegadores más antiguos no admiten XHTML real, O si no configura el tipo MIME , entonces no funcionará. Sin embargo, en los navegadores compatibles con XHTML (todos los principales en este momento) con el application/xhtml+xmltipo MIME , puedo garantizar que <script/>funcionará. Con el tipo MIME. Solamente.
Kornel

44
@capdragon: los navegadores más antiguos no son compatibles con XHTML (servido como 'application / xhtml + xml'). Si les envía un documento XHTML como 'text / html', entonces el XHTML se representa como una sopa de etiquetas (es decir, el navegador lo analiza como HTML y considera errores de etiquetas de cierre automático, de los cuales se recupera con gracia). Sus opciones son 1. escribir HTML 4 (no es exactamente una opción si usa ASP.NET que representa XHTML), 2. servir su XHTML como 'aplicación / xhtml + xml' (requiere IE9 +, y este tipo MIME romperá los scripts en todos los navegadores de todos modos, así que definitivamente no es una opción), 3. escribir HTML 5, que básicamente hace que la sopa de etiquetas sea el estándar :)
Triynko

41

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


Afecta a todas las versiones de MSIE: webbugtrack.blogspot.com/2007/08/…
scunliffe

44
<script> no se cierra automáticamente en Firefox 3.
hsivonen

Bueno, solía funcionar en Firefox cuando lo encontré. Parece que ya no funciona en ningún navegador. ¿También podría funcionar solo en modo peculiar?
Erik van Brakel el

1
@erickson funciona bien en Firefox si usted recibirá su tipo correcto MIME.
Kornel

WebKit continúa haciéndolo por razones de compatibilidad.
Yuhong Bao

35

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.


33

Desde el sitio de referencia de W3 Schools :

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

77
w3schools.com/tags/default.asp Veo 12 etiquetas que terminan en />:"area", "base", "basefont", "br", "col", "frame", "hr", "img", "input", "link", "meta", "param"
mpen

94
Tenga en cuenta que W3schools no está afiliado a W3C e incluso no responde a las correcciones enviadas por los miembros de W3C.
Kornel

2
Como tan a menudo, w3schools es casi correcto. Una forma precisa de encontrar los elementos vacíos es ejecutar grep EMPTY xhtml1-strict.dtd | sortogrep EMPTY xhtml1-transitional.dtd | sort
cayhorstmann

1
En mi humilde opinión, la gente golpea W3Schools demasiado duro. Ha demostrado ser un gran recurso para cuando COMENZAS (!) Sobre un tema del que no sabes nada.
Priidu Neemre

28

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


10

Espero que esto ayude a alguien:

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

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

5

¿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!


4

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


4

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

1
Marcado fijo y limpio. Con cuidado con los enlaces en estas páginas, tardan en cargarse.
e-satis

4

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


2

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.


Al cromo tampoco le gustan las <title/>etiquetas.
Uınbɐɥs

2

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!


Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.