v136 · html

TOC Generator

headingoffset lets embedded content (sidebars, pull quotes, imported sections) shift all its headings by N levels — so an embed's <h1> renders as <h3> inside the host page. A generated TOC can then read the computed levels to build a correctly-nested outline.

Feature detection: checking…

Change the host page's headingoffset or the embedded section's offset — the TOC regenerates live to reflect computed heading levels.

page headingoffset: embed offset:
Table of Contents
Generating…

Computed heading levels (as read by TOC builder):

tag headingoffset context computed level text 
// Read computed heading levels using the heading-level property
// or by inspecting the effective rendering after headingoffset

function buildTOC(root) {
  const headings = root.querySelectorAll('h1, h2, h3, h4, h5, h6');
  return [...headings].map(h => {
    // headingoffset shifts the rendered level
    const tagLevel = parseInt(h.tagName[1], 10);
    const offset = getEffectiveOffset(h); // walks up ancestors
    const computed = Math.max(1, Math.min(6, tagLevel + offset));
    return { text: h.textContent, level: computed };
  });
}

// In an article with headingoffset="1":
// <h1>Introduction</h1> → renders/counts as h2
// <h2>Background</h2> → renders/counts as h3

see also

references