SEO · Content structure

Table of contents generator.

Paste HTML or Markdown and get a nested list of links to every heading. Missing ids are added, skipped heading levels are flagged. Runs in your browser; nothing is uploaded.

Advertisement

Input

Result

Paste some HTML or Markdown and press Generate.

How the list is built

HTML: every <h1> to <h6> element between your chosen levels becomes a link. Headings inside pre, code, script, style, textarea and comments are ignored. If a heading already has an id it is kept; otherwise one is made from the text (lower case, punctuation dropped, spaces to hyphens, -1, -2 on repeats) and shown in an annotated copy of your HTML.

Markdown: only ATX headings are read (lines starting with 1 to 6 # followed by a space). Setext headings (underlined with === or ---) and anything inside fenced code blocks are not. Anchors follow the common GitHub style; other renderers can generate different ids, so click a link after publishing.

Skipped levels: if an h4 follows an h2 there is no h3 in between. The list still nests it one step deeper, and you get a warning because skipped levels make the page outline harder to follow for screen reader users.

Sources: WHATWG HTML, heading elements; CommonMark 0.31.2, ATX headings and fenced code blocks; WCAG 2.2 technique H42, headings.

Frequently asked questions

Do I need to add ids to my headings myself?

No. Copy the annotated HTML this tool returns, which has an id added to each heading that lacked one, and paste it back into your page together with the list.

Will a table of contents help SEO?

It gives readers and crawlers jump links to sections, and search engines may show them as sitelinks under a result. This tool cannot promise either. Google decides that on its own.

Why is my h1 missing from the list?

The default range is h2 to h3. Set the lowest level to h1 to include it.

Is my content sent anywhere?

No. Parsing happens in your browser and nothing is stored or uploaded.

Text processing only

This tool reads heading text and builds links. It does not check that the resulting anchors work in your site, CMS or Markdown renderer, so test a link after you publish.

Advertisement
Advertisement
Listening…