, and

) it was nested inside. The browser rendering was such that section > h1 would have the same font-size and margin as

. The section > section > h1 would be represented as

, and so on. The default rendering was implemented in browsers in their UA styles, but not the heading level in the accessibility tree (what screen readers use). Websites started to use sectioning elements, but didn't expect to see the automatic heading levels from the outline algorithm. In general, this created confusion about where developers could use

elements, tools handled the HTML differently, and the outline algorithm was considered problematic. The outline algorithm was removed from the HTML spec in 2022, but the UA stylesheet rules still remain. The rules in the default styles are what browser vendors are starting to remove now. css /* where x is :is(article, aside, nav, section) */ x h1 { margin-block: 0.83em; font-size: 1.50em; } x x h1 { margin-block: 1.00em; font-size: 1.17em; } x x x h1 { margin-block: 1.33em; font-size: 1.00em; } x x x x h1 { margin-block: 1.67em; font-size: 0.83em; } x x x x x h1 { margin-block: 2.33em; font-size: 0.67em; } For example: html

Level 1

Level 2

Level 3

Level 4

This looks as follows in the old UA styles: Old UA styles for four h1 elements nested in section elements The new UA styles will have this appearance: New UA styles for four h1 elements nested in section elements And here's the HTML example above with your browser's default styles: What to expect and when Alongside the changes in browser styles, page auditing tools like Lighthouse now flag cases of

s without defined font-size as bad practice. Here's the gist of what to expect: *

will no longer adapt its style based on surrounding sectioning elements like
,
,
, and
. UA stylesheet will apply the same style to
with no implicit styles that demote
to match
,
, etc. * Lighthouse will flag a warning if
is used without a specified font-size. The Lighthouse deprecation warning to look out for is H1UserAgentFontSizeInSection. Hints for dealing with this are described in the next section. In terms of when this is happening, changes are rolling out in the following browsers in this timeline: Firefox * From March 31, 2025, Firefox is rolling out changes to 50% of Beta 138 users to remove UA styles for h1 in article, aside, nav, or section on desktop. The plan is to roll out to 5% of users on the Firefox 138 stable release, ramp up to 50% of users, then ship on all platforms in Firefox 140. bug 1885509. * Since Firefox 136, developers will see a console warning for h1s in article/aside/nav/section without author-defined font-size or margins: bug 1937568. * To test in Firefox with the new behavior, set layout.css.h1-in-section-ua-styles.enabled to false in about:config. Chrome * Since version 136, Chrome shows deprecation warnings for
inside the 4 elements, when the
uses the default smaller font size. Marking something deprecated in Chromium will lower Lighthouse scores for "Best Practices": issue 394111284 Safari * There's no implementation bugs to track in Safari for these changes yet, but we can expect WebKit to follow with equivalent updates. Fixing the Lighthouse warning Lighthouse has recently inherited a check based on Chromium's DevTools warnings for sites that don't specify a font-size for
elements. The new rule is called H1UserAgentFontSizeInSection and shows up since March following the addition of deprecation warnings. If you see the
warning, make sure you're applying an explicit
font-size and margins. Here's some recommended styles to use: css h1 { margin-block: 0.67em; font-size: 2em; } To avoid overwriting other style rules that target
you can use :where(), which has zero specificity: css :where(h1) { margin-block: 0.67em; font-size: 2em; } The MDN page for heading elements now contains the usage notes listed above so there is a visible place for developers to see this information. Summary Here's some things to keep in mind: * Do not rely on default browser styles for conveying a heading hierarchy. Explicitly define your document hierarchy using
for second-level headings,
for third-level, etc. * Always define your own font-size and margin for
elements. * Consider updating your CSS resets to account for the change. * Audit your site using Lighthouse and browser DevTools to check for deprecated usage. * Check the usage notes on the MDN documentation for HTML section headings. See also * Firefox: Intent to unship UA styles for h1 in article, aside, nav, section * HTML issue: Remove UA style for h1-h6 in section (et. al.) and hgroup * HTML pull request: Remove UA styles for h1 in article, aside, nav, section * Firefox beta 138 changes announcement on Bluesky Previous Post Implications of Global Privacy Control Your blueprint for a better internet. * MDN on Bluesky * MDN on Mastodon * MDN on X (formerly Twitter) * MDN on GitHub * MDN Blog RSS Feed MDN * About * Blog * Careers * Advertise with us Support * Product help * Report an issue Our communities * MDN Community * MDN Forum * MDN Chat Developers * Web Technologies * Learn Web Development * MDN Plus * Hacks Blog * Website Privacy Notice * Cookies * Legal * Community Participation Guidelines Visit Mozilla Corporation's not-for-profit parent, the Mozilla Foundation. Portions of this content are (c)1998-2025 by individual mozilla.org contributors. Content available under a Creative Commons license.