Browsers are starting to roll out changes in default UA styles for nested section headings. This post describes the incoming changes, how to identify if it's an issue on your websites, and hints for conformant and better-structured pages.

MDN Blog is a platform or publication associated with Mozilla Developer Network (MDN), offering articles, updates, and resources for web developers. Readers can find tutorials, documentation, and best practices for web development technologies such as HTML, CSS, JavaScript, and web APIs. With contributions from experts and community members, MDN Blog provides  insights and guidance to help developers build better web experiences.

MDN Blog

Changes are being rolled out in browsers that remove default user agent styles for h1 elements within nested sections. Developers should ensure their websites do not rely on these default styles to avoid issues flagged by tools like Lighthouse. Explicitly defining font sizes and margins for heading elements is recommended. Specific instructions are provided for different browsers and tips on updating CSS to conform to these changes.

Default styles for h1 elements are changing

It shows a change in the perceived semantic meaning of “heading level 1”, from headings in a section to headings in a page or document.
Whereas before it could have been read as “This is the first heading level relative to this section” and “This is the first heading level relative to this subsection” etc. now heading levels can be thought of as relative to a whole page or document, similar to how heading levels work in a word processor.
I’ve wondered why it wasn’t always this way. This follows the cognitive model of a word processor.

Good to know, makes a lot of sense. Nice write-up too 👍🏻

This is going to help websites a lot! This way we can have more flexible customization. It’s a big change; HTML has been changing for the better in recent years.