demo · v136

Structured Headings

Set headingoffset on a wrapper and watch every nested <h1>…<h6> shift its effective accessibility level. The blue dashed outline shows what :heading matches.

Probing…

Behind a flag. Enable chrome://flags/#enable-experimental-web-platform-features to see headingoffset / headingreset / :heading work. Tree shape below renders either way; outline + computed level only update when the feature is on.

headingoffset on wrapper apply headingreset to inner subtree

Section title (<h1> under wrapper)

Body content.

Subsection (<h2>)

More body.

Inner title (<h1> under inner)

Inner body.

Inner subsection (<h2>)

Even deeper.

computed heading levels (ariaLevel)

the code

<article headingoffset="1">
  <h1>Article title</h1>             <!-- behaves like h2 -->
  <section>
    <h1>Section title</h1>           <!-- behaves like h3 -->
    <section headingreset>
      <h1>Aside title</h1>            <!-- reset; behaves like h1 again -->
    </section>
  </section>
</article>

/* Pseudo-class matches every <h1>-<h6> (and role=heading) */
:heading { font-family: var(--font-display); }
:heading(2) { color: rebeccapurple; }    /* level-specific */