11 Sep ¿Puedo usar etiquetas html inventadas o erróneas? ¿qué sucede?
¿Qué sucede cuando usamos una etiqueta html que no existe o directamente nos la inventamos?
Es una buena pregunta que me hizo un alumno en clase.
¿Cómo se comporta el navegador?
Los navegadores web ignoran la etiqueta.
Sin embargo si escriben el contenido escrito que pudiera ver en su interior.
Dado el siguiente html veamos en imágenes como reacciona el navegador.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>¿Puedo usar una etiqueta html incorrecta?</title>
<style>
p,span{border:1px solid blue;}
</style>
</head>
<body>
<span>un span</span>
<inventada>texto en una etiqueta errónea</inventada>
<span>otro span</span>
<p>un párrafo</p>
<inventada>texto en una etiqueta errónea</inventada>
<p>otro párrafo</p>
</body>
</html>
Podría parecer entonces que podemos inventar etiquetas.
No obstante el resultado final de como se interpretará la página en cuanto al maquetado es incierto y por lo tanto no es una práctica recomendable.
Como consecuencia:
- La página no validará correctamente en caso de que la pasemos por un validador.
- Podemos tener problemas con futuras actualizaciones de navegadores y/o html.
- Para versiones anteriores a IE8 dará problemas.
Para profundizar un poco
Las etiquetas equivocadas se muestran como elementos en línea (css). No obstante es conveniente indicarlo expresamente en la hoja de estilos.
En cuanto al navegador será interpretada como un tipo especial de elemento llamado HTMLunknowElement.
De acuerdo con este hilo de stackoverflow debes seguir las siguientes consideraciones:
- Las etiquetas deben tener apertura y cierre. Nunca hagas una etiqueta del estilo <inventada/>.
- Para evitar errores en futuras versiones usa etiquetas con un guión (-). Por ejemplo <hola-todos>.
- Define por completo sus estilos CSS.
¡Hola!
Querido lector,
¡Deseo que te sea de utilidad! De todos modos… no inventes html, intenta usar siempre y correctamente el standard.
¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!
No Comments