Se pueden crear y usar etiquetas HTML directamente

 (maurycyz.com)
3 puntos por GN⁺ 2025-12-30 | 1 comentarios | Compartir por WhatsApp
  • En HTML, incluso si se usan nombres de etiquetas no reconocidos, el navegador los trata como elementos genéricos
  • Si ese nombre de etiqueta se especifica como selector en CSS, es posible aplicar estilos y controlar su visualización
  • Usar nombres que incluyan un guion (-) ayuda a evitar conflictos con futuros estándares de HTML
  • En lugar de o, usar etiquetas personalizadas con significado mejora la legibilidad del código
  • Incluso en estructuras anidadas complejas, es más fácil entender la estructura solo con los nombres de las etiquetas, lo que facilita el mantenimiento

Uso de etiquetas HTML personalizadas

  • El navegador renderiza las etiquetas desconocidas como elementos de bloque genéricos

    • Este es un comportamiento normal especificado en el estándar HTML, y se pueden controlar visualmente si se les aplican estilos en CSS
    • Por ejemplo, se puede definir una etiqueta como `` y darle estilo en CSS con cool-thing { ... }

  • Si el nombre de la etiqueta incluye un guion (-), no habrá riesgo de conflicto con posibles adiciones futuras al estándar HTML

    • Ej.: ,

Mejora de legibilidad y estructura

  • Si se usan etiquetas con nombres significativos en lugar de o, el código se vuelve más fácil de entender
    • Por ejemplo, se puede usar en lugar de
  • En estructuras anidadas de ``, puede ser difícil ubicar qué etiqueta de cierre corresponde a qué parte, pero con nombres de etiqueta explícitos la estructura queda clara
    • Si dentro de se organiza con, ``, etc., la estructura del DOM se entiende de forma intuitiva

Código de ejemplo

  • Forma tradicional 
    
  Hello, World!
  • Forma con etiqueta personalizada 
    
  Hello, World!
    • En CSS, se puede aplicar estilo con algo como cool-thing { display: block; font-weight: bold; text-align: center; ... }

Conclusión

  • Si se aprovecha la flexibilidad para definir etiquetas que permite el estándar HTML, se puede escribir un marcado estructurado con alta legibilidad
  • Aun así, si ya existe una etiqueta semántica adecuada definida, debe priorizarse el uso de esa etiqueta existente

Lecturas relacionadas

1 comentarios

 
GN⁺ 2025-12-30
Comentarios de Hacker News

  • Se enfatiza que no es una etiqueta no reconocida Presenta su [publicación de blog](https://dashed-html.github.io) y explica que, hasta que WHATWG agregue como nuevo elemento, este se trata como HTMLUnknownElement, mientras que es un **HTMLElement válido**, útil para maquetación y estilos Si se actualiza con la JavaScript Custom Elements API, se convierte en un **elemento personalizado definido** Es un comportamiento estándar en todos los navegadores, y el W3C HTML Validator también reconoce los elementos personalizados con guion como HTMLElement Sin embargo, la regla `[hidden]{display:none}` de la hoja de estilos UA predeterminada no se hereda, así que hay que declararla manualmente Como tiene display:block por defecto gracias a la hoja de estilos UA, en los elementos personalizados hay que establecer la propiedad display directamente Los selectores :defined y :not(:defined) de CSS permiten distinguir entre elementos definidos y no definidos Declarative Shadow DOM (``) también crea elementos personalizados no definidos de la misma forma

    • Replica que, en Chromium, no es un problema de la hoja de estilos UA, sino de que hidden es un atributo de presentación HTML (presentation attribute) La hoja de estilos UA se aplica igual a los elementos personalizados, y la regla [hidden] no existe hidden es un ejemplo de atributo que se interpreta como estilo, como align="right"
    • Lamenta que no se haya podido usar dos puntos (:) en lugar de guion (-), porque habría permitido integrar de forma natural los espacios de nombres XML Menciona que también habría sido posible convertir dos puntos en guiones en nginx o apache Cierra con un tono nostálgico: “no podemos volver a 1999”
    • Se pregunta por qué esta forma de trabajar no es la práctica predeterminada

  • Señala que la estructura anidada de en el código de ejemplo es excesiva Propone que sería más apropiado usar **etiquetas semánticas** como, y

    • Indica que, a diferencia del atributo class, una etiqueta personalizada solo puede tener un nombre Las clases pueden ser varias y no tienen orden, pero los elementos personalizados anidados fuerzan un orden, así que es difícil expresar lo mismo
    • Analiza que el problema no es el “div soup”, sino que es resultado de una decisión de diseño de HTML que acopla fuertemente estructura y estilo Considera que eso tenía sentido en 1996, pero ya no ahora

  • Comparte su experiencia usando elementos personalizados durante 3 o 4 años La idea es ingeniosa, pero complicada en la práctica Usar demasiadas etiquetas personalizadas reduce la legibilidad y dificulta distinguir entre bloques e inline Como enfoque equilibrado, deja las etiquetas base tal como están y usa etiquetas personalizadas solo para elementos tipo componente como o Los subcomponentes se distinguen con el atributo slot, como en `` Prefiere limitar las clases a modificaciones o personalización, y expresar la estructura mediante slots

    • Dice que le interesan mucho los enfoques equilibrados de Web Components y pide ejemplos o toolkits Presenta Good.HTML, que creó él mismo, y explica que soporta autohook, interpolación basada en template literals y estructura de componentes ordenada Añade que también implementó elementos personalizados self-closing como < !app-header /> mediante un truco con nodos de comentario
    • Pregunta si, para seleccionar por el atributo slot en CSS, habría que usar algo como div[slot="hero-blurb"]
    • Menciona que este patrón le recuerda a la estructura block–element de BEM

  • Por defecto, las etiquetas personalizadas se comportan como `` Si hace falta, se puede definir su comportamiento con la Custom Element API

    • Cuenta que en 2014 usó elementos personalizados de forma extensiva y expresa su pena por que React se haya vuelto dominante Cree que, para la mayoría de usuarios, la combinación de HTML + elementos personalizados habría sido mejor que una SPA
    • Dice que es mejor priorizar los elementos semánticos y usar elementos personalizados solo cuando haga falta Comparte un ejemplo de Hypalink que creó él mismo y señala la subvaloración de Web Components

  • Presenta una etiqueta personalizada llamada que implementa lo contrario de Permite ocultar cierta área cuando JS está desactivado Comparte el enlace del proyecto

    • Sugiere que con la función @media (scripting) de CSS se puede lograr el mismo efecto solo con CSS puro Adjunta un enlace a la documentación de MDN

  • Comparte que en el pasado recreó por su cuenta la etiqueta eliminada `` La implementó con jQuery y manipulando visibility, y dice que le sorprendió que el navegador permitiera etiquetas arbitrarias No publicó el código porque eran apenas unas 10 líneas, aunque supone que hubo muchos intentos parecidos

    • Explica que, en realidad, la mayoría de navegadores nunca implementó ``, y que solo Firefox y Opera la soportaron hasta 2013
    • Expresa que todavía extraña la desaparición de Flash
    • Comparte un código de ejemplo diciendo que el efecto `` también puede lograrse solo con CSS Añade que, si se usa el selector blink en lugar de .blink, se aplica directamente a la etiqueta
    • Señala que un comportamiento como el de `` tiene demasiado peso semántico como para ofrecerse como un simple elemento HTML, y dice alegrarse de que haya desaparecido

  • Señala que ejemplos como y pueden sustituirse por etiquetas HTML reales Sería más apropiado usar , y ``

    • Añade que, al usar etiquetas HTML predefinidas, también se obtienen las ventajas del estilo predeterminado del navegador

  • Los elementos personalizados por defecto se renderizan inline como ``, pero basta con definir una propiedad display predeterminada con CSS Antes se evitaban por problemas de espacios de nombres, pero al permitir el estándar el guion (-), el riesgo de conflicto desapareció También funcionan sin problema en selectores CSS y se puede acceder a ellos con querySelector Siente que incluso sin frameworks como Vue, el HTML moderno ya es suficientemente expresivo

    • Añade que los elementos no estándar con guion se tratan como HTMLElement y no como HTMLUnknownElement Esto está diseñado para que, al actualizarse en el futuro, la cadena de prototipos se extienda de forma natural

  • Para asignar estilos predeterminados a todos los elementos personalizados, basta con hacer algo así

    :where(:not(:defined)) {
  display: block;
}
    • Dice que justo estaba buscando este método y expresa asombro y agradecimiento

  • Recuerda que el IE antiguo no reconocía las etiquetas HTML5, así que lo resolvió con un script que hizo alrededor de 2010 Si se creaba una vez la etiqueta con JS, IE pasaba a reconocerla, y luego ya no importaba borrarla Dice que así se dio cuenta de que también se podían renderizar etiquetas arbitrarias Comparte una entrada de blog de esa época

    • Añade que el popular html5shim funcionaba del mismo modo