v136 · dom

Structured Headings, the headingoffset & headingreset attributes, and the :heading pseudo class

A system for creating structured headings within a document.

concepts

  1. Structured Headings

    headingoffset/headingreset + :heading pseudo bring real component-friendly heading semantics without breaking nested-section nightmares.

  2. UGC embed

    The motivating use case: a UGC widget whose author always writes h1, embedded into different host surfaces with headingoffset rewriting effective levels.

  3. Article Outliner

    Paste any HTML and the outliner computes both the literal heading level and the resolved effective level under nested headingoffset / headingreset. Three presets (UGC embed, docs TOC, card grid).

  4. Heading Accessibility Checker

    Paste HTML and the checker applies headingoffset to compute effective levels, detects skipped heading ranks (common WCAG 1.3.1 failure), and renders the visual document outline — showing exactly what a screen reader would traverse.

  5. TOC Generator

    A live document with a host headingoffset and an embedded section with its own offset. Adjust either number and watch the table of contents regenerate with correct hierarchical numbering. A debug table shows every heading's tag, offset context, and computed level side by side.

why it shipped

Websites which allow users to write comments or documents (User Generated Content - UGC) rely on users to produce meaningful heading structures for their written content. This can be difficult for a user where this content is presented on different surfaces (web pages or applications) that have different document structures. Giving web developers a headingstart attribute frees users from trying to pick the correct heading level (they can always start their comment or document at h1), and makes it significantly easier for web developers to render blocks of UGC without rewriting the UGC authors

references