The HTML spec used to define an outline algorithm that gave

elements an implicit semantic heading level based on how many sectioning elements (

,

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

  ,

  ,

• 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:

• 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.

• 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

• There’s no implementation bugs to track in Safari for these changes yet, but we can expect WebKit to follow with equivalent updates.

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:

h1 {
  margin-block: 0.67em;
  font-size: 2em;
}

To avoid overwriting other style rules that target

you can use :where(), which has zero specificity:

: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.

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.