jquery.app
English
EnglishDeutschFrancaisEspanol日本語Nederlands

HTML Tools

Table of Contents Anchor Generator

Extract headings from pasted HTML and build a nested unordered list with anchor links. Each heading gets a slugified ID. Perfect for long blog posts, guides, and documentation pages.

Loading tool...

What is Table of Contents Anchor Generator?

A table of contents is a linked list of headings that lets readers jump to sections within a long page. Anchor links use the id attribute on each heading to create deep-linkable URLs. For static sites with long articles, a TOC improves navigation, accessibility, and reader engagement by letting users preview the article structure.

Quick answer

Generate a nested table of contents with anchor links from heading tags in your HTML. Each TOC entry links to a slugified id on the corresponding heading for easy page navigation.

Limitations

  • The tool generates the TOC markup and the heading id values separately. You must manually add the generated id attributes to the heading tags in your HTML for the anchor links to work.
  • Headings without text content or headings nested inside non-semantic containers may not be extracted correctly by the parser.
  • The generated TOC uses flat nesting based on heading levels. Custom CSS may be needed for multi-level indentation styling.

How to use this tool

  1. Paste the HTML of your article or page content into the input area.
  2. Select which heading levels to include in the TOC, such as h2 through h4.
  3. Review the generated nested list and click a link to verify the anchor format.
  4. Copy the TOC HTML and paste it at the top of your article, then add the id attributes to your headings.

What you can use it for

  • Add a table of contents to a long guide with 12 or more sections.
  • Create anchor links for a documentation page with a deep h2 and h3 hierarchy.
  • Generate jump-to-section links for a multi-section landing page.

Use cases

Practical examples

Example

Long guide with 12 sections

A publishing guide on static site setup covers installation, configuration, deployment, and troubleshooting. The TOC lists each h2 section with an anchor link so readers can skip directly to the relevant step.

Example

Documentation with h2/h3 hierarchy

An API reference uses h2 for endpoint groups and h3 for individual endpoints. The TOC generator preserves the nesting so readers see the parent-child relationship in the sidebar.

Common mistakes

  • Generating a TOC with anchor links but not adding corresponding id attributes to the original headings, which makes the links nonfunctional.
  • Attempting to generate a TOC from pasted content that contains no heading tags, which produces an empty list.
  • Generating a TOC with inconsistent heading levels such as jumping from h2 to h4 without h3, which breaks the visual nesting.

Verification

  1. Click each TOC link and confirm the page scrolls to the correct heading section without errors.
  2. Check the page URL after clicking a TOC link to verify the anchor fragment appears correctly in the address bar.

FAQ

Questions about Table of Contents Anchor Generator

Does this tool add id attributes to my existing headings?

It generates the id values as part of the TOC links. You must add those id attributes to the corresponding heading tags in your HTML manually or through your site generator.

Should every page have a table of contents?

Only pages with enough content to justify navigation benefit from a TOC. A page with fewer than three or four headings usually does not need one.

What heading levels should the TOC include?

Include h2 through h3 or h2 through h4 for most articles. Start from h2 because the h1 is usually the page title. Including too many levels such as h5 and h6 makes the TOC cluttered.

Related tools

More html tools

Also try

Also try