What does the HTML Table of Contents Generator do?
The HTML Table of Contents Generator is a free online tool that automatically parses h1-h6 heading tags in HTML code and generates a structured nested table of contents. Whether you are writing technical documentation, blog posts, or product manuals, just paste your HTML and generate a numbered, anchor-linked TOC in one click to greatly improve document navigation.
Core Features
β’ Automatic heading parsing: Detects all h1-h6 levels with customizable parsing range (e.g., only h2-h4)
β’ Auto numbering: Generates 1.1.1-style hierarchical numbers that clearly indicate heading levels
β’ Anchor links: Automatically assigns id attributes and TOC links for instant in-page jumps
β’ Nested TOC tree: Builds nested ul/ol lists by heading level for a clear structure at a glance
β’ Markdown output: Generates Markdown-format TOCs for README files and documentation sites
β’ One-click copy/download: Copy HTML or Markdown to the clipboard, or download as an HTML file
How to Use
1. Paste HTML containing heading tags into the input box, or click "Load Example" to try it quickly
2. Configure options: heading level range, auto numbering, anchor links, nested or flat list
3. Click "Generate TOC" or press Ctrl+Enter to parse and generate automatically
4. Switch between Preview/HTML Code/Markdown views and click copy or download to get the result
Use Cases
Case 1: Technical Documentation
Developers writing API docs and technical specifications can quickly generate navigation TOCs to improve readability and user experience.
Case 2: Blog Post Optimization
Bloggers add TOC navigation to long articles so readers can jump to the sections they care about, reducing bounce rate and improving engagement.
Case 3: Markdown Document Conversion
Convert HTML heading structure to a Markdown TOC for use in GitHub README files, documentation sites, and more.
Extended Knowledge
A Table of Contents is the standard navigation component of long documents. A good TOC follows heading hierarchy conventions: h1 as the main page title (one per page), h2 as chapter titles, and h3-h6 for finer subdivisions. Auto numbering uses the "chapter.section.subsection" format (e.g., 2.3.1), and anchor links use the id attribute for in-page jumps. Nested ul/ol lists are the most common TOC HTML structure, which is semantic and SEO-friendly.
β FAQ
Is this tool free?
Completely free, no registration or download required. All features run locally in your browser and data is never uploaded to any server.
Does my data go through a server?
No. This is a pure frontend application. All operations happen locally in your browser and your data never leaves your device.
Which heading levels are supported?
All heading levels from h1 to h6 are supported, and you can freely choose the parsing range (e.g., only h2-h4). Heading hierarchy is detected automatically to build a nested TOC tree.
Can I customize the generated TOC?
Yes. Auto numbering (1.1.1 format), anchor link generation, indentation control, and nested/flat list switching are all supported. Output formats include HTML and Markdown.
How do I insert the TOC into my web page?
Click the "Copy HTML" button and paste the generated TOC HTML code into your page. Anchor links will jump to the corresponding headings automatically.
Does it support Markdown output?
Yes. Switch the output format to Markdown to generate an indented, linked Markdown TOC, ideal for README files and documentation sites.