¿Puedo usar etiquetas html inventadas o erróneas? ¿qué sucede?

¿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>
código fuente
En navegador chrome vemos como se interpreta el código fuente (ctrl + u)
¿Puedo usar etiquetas html inventadas o erróneas? ¿qué sucede? 1
En navegador chrome vemos como se interpreta por pantalla.

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!

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.