Etiquetas HTML personalizadas

Etiquetas HTML personalizadas

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

Todo debería ser hecho de la manera más simple posible, pero no más simple —Albert Einstein

20200402142200

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

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


  1. 20200720142211 Refactorizando mis CSS ↩︎

  2. Según un artículo de Jordan Brennan no habría ningún problema, es más, es incluso aconsejable ↩︎

  3. Especificación en desarrollo que permite a los desarrolladores crear sus propias etiquetas HTML y registrarlas con el parser del navegador. Mozilla ha desarrollado una librería para facilitar el proceso: x-tags.org ↩︎