Se cambia el estilo predeterminado de la etiqueta h1

 (developer.mozilla.org)
3 puntos por GN⁺ 2025-04-11 | 1 comentarios | Compartir por WhatsApp
  • Los principales navegadores están realizando una actualización para cambiar el estilo predeterminado (estilo UA) de la etiqueta <h1>
  • Afecta especialmente a <h1> usados dentro de section, article, nav, aside y otros elementos anidados
  • Los desarrolladores deben tener cuidado, ya que este cambio puede provocar variaciones de estilo inesperadas en sus sitios o advertencias en Lighthouse

Qué está cambiando

  • La especificación de HTML alguna vez incluyó una regla llamada “algoritmo de esquema”, según la cual <h1> se mostraba visualmente como <h2>, <h3>, etc., dependiendo de cuántos elementos de seccionamiento estuvieran anidados
  • Por ejemplo, section > h1 se renderizaba como <h2>, y section > section > h1 como <h3>
  • Esto no se reflejaba en el árbol de accesibilidad real, y como las herramientas lo interpretaban de forma distinta, generaba confusión
  • Al final, este algoritmo fue eliminado de la especificación HTML en 2022, y ahora los navegadores también están quitando los estilos UA asociados

Ejemplo del estilo UA en navegadores anteriores

  • x h1 { font-size: 1.50em }
  • x x h1 { font-size: 1.17em }
  • x x x h1 { font-size: 1.00em }
  • x x x x h1 { font-size: 0.83em }
  • x x x x x h1 { font-size: 0.67em }

Ejemplo de estructura HTML

<body>  
  <h1>Level 1</h1>  
  <section>  
    <h1>Level 2</h1>  
    <section>  
      <h1>Level 3</h1>  
      <section>  
        <h1>Level 4</h1>  
      </section>  
    </section>  
  </section>  
</body>

Cambios esperados y calendario

  • <h1> ya no cambiará automáticamente de estilo solo por estar dentro de elementos section anidados
  • El estilo UA aplicará el mismo estilo a todos los <h1>
  • Lighthouse mostrará una advertencia si <h1> no tiene font-size definido
  • Advertencia mostrada: H1UserAgentFontSizeInSection

Firefox

  • Desde el 31 de marzo de 2025, Firefox Beta 138 comenzó a desplegar el cambio de estilo al 50% de los usuarios de escritorio
  • En Firefox Stable 138 se desplegará al 5% y luego se planea un rollout completo hasta la versión 140
  • En Firefox 136 o superior, aparece una advertencia en la consola si no se define font-size o margin
  • Cómo cambiar la configuración: en about:config, establecer layout.css.h1-in-section-ua-styles.enabled en false

Chrome

  • Desde Chrome 136, si <h1> usa el estilo predeterminado reducido, aparece una advertencia
  • Esto puede afectar la puntuación de “Best Practices” en Lighthouse

Safari

  • Aún no hay una actualización concreta ni seguimiento de bugs, pero se espera una actualización similar en WebKit

Cómo corregir la advertencia de Lighthouse

  • Lighthouse muestra la advertencia cuando <h1> no tiene font-size, basándose en las advertencias de Chromium DevTools
  • Para evitarlo, hay que asignar explícitamente un estilo a <h1>

Ejemplo de estilo

h1 {  
  margin-block: 0.67em;  
  font-size: 2em;  
}
  • Para evitar la specificity (prioridad), usar :where()
:where(h1) {  
  margin-block: 0.67em;  
  font-size: 2em;  
}

Lista de verificación resumida

  • No depender del estilo predeterminado del navegador
  • Usar <h2>, <h3>, etc. de forma adecuada para expresar explícitamente la jerarquía
  • Definir explícitamente font-size y margin para todos los <h1>
  • Actualizar el CSS reset para reflejar este cambio
  • Revisar las advertencias con Lighthouse y DevTools
  • Consultar la documentación relacionada de MDN para reflejar el contenido más reciente

Material relacionado

Lecturas relacionadas

1 comentarios

 
GN⁺ 2025-04-11
Comentarios de Hacker News

  • En la versión estable de Firefox 138 se lanzará para el 5% de los usuarios, con planes de ampliarlo al 50%

    • Hay opiniones de que esto dificultará las pruebas, ya que los desarrolladores web podrían encontrarse con un comportamiento del navegador distinto al de los usuarios
    • Hay opiniones de que parece haberse inspirado en el método de despliegue de Facebook, pero que este enfoque no es apropiado para Firefox porque no es software del lado del servidor

  • Resulta interesante el contexto histórico del algoritmo de esquema adoptado por el W3C

    • Los navegadores y los lectores de pantalla se negaron a adoptarlo debido a la ambigüedad con el contenido web existente y a problemas de mantenimiento
    • Ocho años después, WHATWG finalmente lo abandonó

  • Hay opiniones preguntándose desde cuándo el comportamiento de H1 estaba incluido en la especificación

    • Hay quienes dicen que escriben HTML desde 1995 y nunca habían oído hablar de eso
    • Hay opiniones de que sería mejor eliminarlo porque puede causar confusión

  • Hay opiniones de que nunca se habían detenido a pensar a fondo sobre el comportamiento de los elementos de sección (<section>, <aside>, <nav>, <article>) y de la etiqueta <h1>

  • Es una lástima que el algoritmo de esquema no haya tenido éxito

    • Hay opiniones de que debería ser posible componer de forma arbitraria contenido de diversas fuentes
    • Hay opiniones de que uno debería poder escribir un fragmento <h1> y darle el significado de "el título de más alto nivel dentro de mi contexto", en lugar de depender del contexto global del documento

  • Hay opiniones de que la etiqueta <h1> debería seguir siendo <h1> sin importar su ubicación

    • No debería cambiar por defecto, y eso podría resolver los problemas de accesibilidad de los lectores de pantalla

  • Hay opiniones de que, debido a esta complejidad, muchos diseñadores usan <div> para todo

    • Si se usa el atributo role, también se puede asegurar la accesibilidad

  • Hay opiniones de que los encabezados de HTML son algo tontos

    • Separar las secciones de un libro con la etiqueta <section> sería una forma de expresión mejor
    • Hay opiniones de que h1 y h2 crean etiquetas explícitas y una jerarquía distinta de otros formatos de HTML
    • Hay una broma sobre querer volver al pasado y hacer que Tim Berners-Lee resolviera este problema