v140 · css

Deprecate special font size rules for H1 within some elements

The HTML spec contains a list of special rules for <h1> tags nested within <article>, <aside>, <nav>, or <section> tags: https://html.spec.whatwg.org/multipage/rendering.html#sections-and-headings These special rules are deprecated, because they cause accessibility issues. Namely, they visually reduce the font size for nested <h1>s so that they "look"

concepts

  1. H1 Font-size Rule

    Drops the UA stylesheet quirk where nested <h1>s shrink. Authors now decide heading hierarchy via explicit CSS, matching long-standing accessibility guidance.

  2. Heading Hierarchy

    Side-by-side document tree with legacy UA rule on and off. Same markup, two different visual outcomes.

  3. Breakage Finder

    Paste your HTML; every h1 nested in a sectioning element is flagged with its ancestor chain. Triage tool for migrating codebases.

  4. Author Recipe

    Three opinionated replacements for the missing UA cascade: explicit selectors, flat embrace, or container-aware fluid sizing.

  5. A11y Audit

    The accessibility motivation: visual hierarchy vs. the a11y tree. Side-by-side rendered output and simulated tree, with the audit warnings axe/lighthouse would emit.

why it shipped

The current behavior is an accessibility problem: the font size is reduced as if an <h2> is being used, but the a11y tree still shows the item as an <h1>. By removing these special rules, we'll nudge developers to do the "better" thing of actually using an <h2>.

references