html - para - porque mi pagina web se ve diferente en navegadores
¿Cuáles son todos los elementos de cierre automático válidos en XHTML(según lo implementado por los principales navegadores)? (13)
¿Qué pasa con <meta> y <link> ? ¿Por qué no están en esa lista?
Rápida regla general, no cierres por tu cuenta ningún elemento que esté destinado a tener contenido, ya que definitivamente provocará problemas en el navegador tarde o temprano.
Los que son de cierre automático, como <br> y <img> , deberían ser obvios. Los que no son ... ¡simplemente no los cierran por sí mismos!
¿Cuáles son todos los elementos de cierre automático válidos (por ejemplo, <br/>) en XHTML (según lo implementado por los principales navegadores)?
Sé que XHTML permite técnicamente que cualquier elemento se cierre automáticamente, pero estoy buscando una lista de esos elementos admitidos por 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 />.
<hr /> es otro
Deberías echar un vistazo a las DTD xHTML , todas están en la lista. Aquí hay una revisión rápida de todas las principales:
<br />
<hr />
<img />
<input />
Desde el sitio de referencia de W3 Schools :
<area />
<base />
<basefont />
<br />
<hr />
<input />
<img />
<link />
<meta />
Espero que esto ayude a alguien:
<base />
<basefont />
<frame />
<link />
<meta />
<area />
<br />
<col />
<hr />
<img />
<input />
<param />
La última vez que revisé, los siguientes fueron los elementos vacíos / vacíos listados en HTML5.
Válido para autores: área, base, br, col, comando, inserción, fuente de eventos, hr, img, entrada, enlace, meta, param, fuente
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 cuando se sirve XHTML como texto / html. (Simplemente pruébelos examinando el DOM producido).
En cuanto a XHTML servido como application / xhtml + xml (que lo convierte en XML), se aplican las reglas XML y cualquier elemento puede estar vacío (aunque el DTD XHTML no puede expresar esto).
La mejor pregunta sería: ¿qué etiquetas se pueden cerrar automáticamente incluso en modo HTML sin afectar el código? Respuesta: solo aquellos que tienen contenido vacío (son nulos). Según las especificaciones de 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 enumeraba el command . Además, según varias fuentes, las siguientes etiquetas obsoletas o no estándar son nulas:
basefont, bgsound, frame, isindex
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 de finalización de todos modos, así que si pones una barra sobre aquellos parece como si la sintaxis de cierre automático fue compatible.
No voy a intentar sobrelaborar al respecto, 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 cuando los cierro son:
<title/>
Para esto, simplemente he recurrido a darle siempre una etiqueta de cierre por separado, ya que una vez que está allí en el <head></head> realmente no hace que tu código tenga más problemas para trabajar de todos modos.
<script/>
Este es el gran problema con el que recientemente tuve problemas. Durante años, siempre he usado etiquetas <script/> 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 (supuestamente) era que el navegador nunca llegaba a la etiqueta <form> porque no se daba cuenta de que este era el final de la etiqueta <script/> . Entonces, cuando lo convertí en etiquetas separadas <script></script> , todo funcionó. ¿Por qué es diferente en diferentes páginas que hice en el mismo navegador? No lo sé, pero fue un gran alivio encontrar la solución.
Otro problema de etiqueta de cierre automático para IE es el elemento de título. Cuando IE (acaba de probarlo en IE7) ve esto, presenta al usuario una página en blanco. Sin embargo, "ver la fuente" y todo está allí.
<title/>
Originalmente vi esto cuando mi XSLT generó la etiqueta de cierre automático.
Se denominan elementos "vacíos" en HTML 5. Se enumeran en la especificación oficial de W3 .
Un elemento void 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, inserción, hr, img, entrada, keygen, enlace, meta, param, fuente, pista, wbr
Todos los navegadores compatibles con XHTML (Firefox, Opera, Safari, IE9 ) admiten la 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 incorrectamente agregado.
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 sobre este tema: la intención era permitir que los navegadores antiguos (solo HTML) aceptaran documentos XHTML 1.0 siguiendo las pautas y sirviéndolos como texto / html. Por lo tanto, los documentos servidos como text / html deben tratarse como HTML y no como XHTML.
Es un error muy común, porque W3C Validator ignora en gran medida esa regla, pero los navegadores la siguen religiosamente. Lea Comprensión de HTML, XML y XHTML del blog 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 en absoluto XHTML, sino HTML realmente inválido que está pasando por el manejo de errores de los analizadores HTML. ¡Todos esos enlaces "Valid XHTML 1.0!" En la web realmente dicen "HTML invalido 4.01!".
Para comprobar si tienes XHTML real o HTML no válido con DOCTYPE de XHTML, ponlo en tu 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 comprobar es ver la fuente en Firefox. Resaltará 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 DOCTYPE adicional. Content-Type es el rey.
Para el registro, la especificación XHTML permite que cualquier elemento se cierre automáticamente haciendo que XHTML sea una aplicación XML : [énfasis mío]
Las etiquetas de elementos vacíos se pueden usar para cualquier elemento que no tenga contenido , ya sea que se declare o no con la palabra clave EMPTY.
También se muestra explícitamente en la especificación XHTML :
Los elementos vacíos deben tener una etiqueta final o la etiqueta de inicio debe finalizar con
/>. Por ejemplo,<br/>o<hr></hr>
Un elemento para tener mucho cuidado con este tema es el elemento <script >. Si tiene un archivo de origen externo, PROVOCARÁ 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 me cerraba con exceso de celo cada elemento que veía ;-)