Context-aware headings in HTML

A common issue that we've probably all faced at some point is having a component that includes a heading, which sometimes should be an H2 and sometimes maybe an H3, depending on where it's used. We solved this by giving editors an option to pick the appropriate heading level in the CMS. That works, but it means more work for them, because they need to keep track of the document outline, and it's also a potential source of error. The headingoffset attribute Yesterday, I heard about a new experimental attribute that offers a better solution to this problem. The heading offset content attribute allows us to offset heading levels for descendants. Let's take the outline from the page in the screenshot and see how we can make it more context-aware. <h1>Museums</h1> <section> <h2>Free entry to the museum</h2> </section> <section> <h2>All museums and collections</h2> <h3>Aphabetical</h3> <h3>By district</h3> </section> First, we turn all headings into H1s. Then we add the headingoffset…