demo · v136

UGC embed

The motivating use case from the chromestatus entry: a comment system embedded on different surfaces. Authors always write h1. The host wraps the comment in a div with headingoffset matching its own depth, and the embedded h1s shift into the right effective level — without rewriting any of the UGC.

Probing browser support for headingoffset…

Article: Things I learned

The host author wrote this h2. Below is a third-party comment widget — the comment's h1 should NOT collide with the article's heading.

What the commenter wrote (h1 in source)

Comment body paragraph.

A sub-point (h2 in source)

More commentary.

effective heading levels (after offset)

the code

// Host (chooses what depth the embed lives at):
<div headingoffset="1">
  <!-- UGC iframe / embed lives here -->
</div>

// User-generated content (always starts at h1):
<h1>What the commenter wrote</h1>
<h2>A sub-point</h2>
// Effective levels: h2 + h3, automatically.

why this angle

The sibling concept shows the attribute applying to a synthetic example. This one is the deployed pattern: the same UGC block under three different host surfaces. Picking headingoffset from the dropdown changes the host wrapper without touching the embed.

see also