Etiquetas HTML personalizadas

Etiquetas HTML personalizadas

Recientemente¹ me dí a la tarea de refactorizar mis hojas de estilo.

Para simplificar al máximo el mantenimiento, intento no usar clases. Únicamente las etiquetas nativas de HTML.

No es que la semántica sea un tema que me quite el sueño, es que creo que todo ha de simplificarse tanto cómo sea posible.

Estaba refactorizando un componente —el header del blog— que contenía una etiqueta <p> destinada a mostrar mi profesión.

Intenté encontrar una etiqueta semántica para este caso en específico, pero no hay, a la fecha, ninguna etiqueta que se adapte a la situación.

Se me ocurrió que tal vez, pese a que en la sintáxis oficial tal etiqueta no existe, dado que los navegadores suelen tratar las etiquetas extrañas como div, podría usar una etiqueta personalizada y no oficial : <job>

Así que investigué hasta que punto es malo usar este tipo de etiquetas y cómo implementarlas.

Encontré un hilo en stackoverflow que hablaba del tema, y aunque las respuestas eran bastante informativas, el hecho del quel hilo tenga 10 años hace que no pueda conformarme con ellas.

Lo que saqué en claro es que sí se pueden usar, aunque no sea una buena práctica.

Implementación

Dado que la mayoría de navegadores tratan las etiquetas ajenas a la sintáxis oficial como divs, puedes empezar a tus etiquetas personalizadas sin ningún tipo de pre-configuración.

Para normalizar su uso, sin embargo, has de darle un par de propiedades en tu hoja de estilos. Por ejemplo, si quiero usar una etiqueta <job>, en el css escribiría:

job {
    display: block;
    margin: 0;
    padding: 0;
}

Y para que sean compatibles con versiones de IE:

<!--[if lt IE 9]> 
 <script> document.createElement("job"); </script>
 <![endif]-->
-->

Fuente: https://stackoverflow.com/questions/2802687/is-there-a-way-to-create-your-own-html-tag-in-html5

Algunas respuestas en hilos similares sugieren que es una buena idea crear el elemento independiemente de que el navegador sea o no IE:

var x = document.createElement('job');
xFoo.addEventListener('click', function(e) {
  alert('Thanks!');
});

Conclusión

Es posible implementar tags o etiquetas personalizadas a sabiendas de que pueden haber problemas en función de los navegadores y nos estaríamos saliendo de los estándares de la web.

Pese a que implementar etiquetas custom facilitaría enormemente el mantenimiento de una web (tanto CSS como HTML), dudo que sea una buena idea a largo plazo.²

Se puede obtener un resultado similar y que respete los estándares con los Web Components³, pero a costa de la simplicidad que estabamos buscando en un principio.