Default styles for H1 elements are changing
a year ago
- #browser-updates
- #web-development
- #accessibility
- Browsers are changing default UA styles for nested section headings, affecting <h1> elements.
- The HTML spec's outline algorithm, which previously defined implicit heading levels for <h1> based on nesting, was removed in 2022, but UA stylesheet rules remained.
- Default styles for <h1> in nested sections (e.g., <section>, <article>) will no longer adapt to match <h2>, <h3>, etc.
- Lighthouse now flags <h1> elements without specified font-size as bad practice, with a warning (H1UserAgentFontSizeInSection).
- Browser rollout timeline: Firefox starts changes in Beta 138 (March 2025), Chrome shows deprecation warnings since version 136, and Safari updates are expected.
- Recommended fix: Explicitly define <h1> font-size and margins (e.g., font-size: 2em; margin-block: 0.67em).
- Use :where(h1) for zero-specificity styling to avoid overwriting other rules.
- Key takeaways: Avoid relying on default styles, define heading hierarchy explicitly, and audit sites using Lighthouse/DevTools.