Generate HTML table of contents from heading structure with anchor links, nesting, and numbering options.
Paste HTML that contains headings and this tool returns a ready-to-use table of contents: a nested list that mirrors the document's h1-h6 outline, where each entry links to its heading's id anchor and can carry a decimal number (1.1, 1.2.1). It runs entirely in the browser, so nothing you paste is sent to a server. The thing most people get wrong: the links only work in a page whose headings actually have the id attributes the entries point to, and the TOC only covers the headings in the snippet you paste, not the whole file.
A concrete input and expected output from the current implementation.
Input
<h1 id="introduction">Introduction</h1> <h2 id="install">Installation</h2> <h2 id="usage">Usage</h2> <h3 id="config">Configuration</h3> <h1 id="reference">Reference</h1> <h2 id="options">Options</h2>
Expected output
<ul>
<li><a href="#introduction">1. Introduction</a>
<ul>
<li><a href="#install">1.1 Installation</a></li>
<li><a href="#usage">1.2 Usage</a>
<ul>
<li><a href="#config">1.2.1 Configuration</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#reference">2. Reference</a>
<ul>
<li><a href="#options">2.1 Options</a></li>
</ul>
</li>
</ul> The tool walks the pasted headings in document order, nesting each one under the nearest preceding heading of a shallower level, and assigns decimal numbers by position: 1, then 1.1 and 1.2, with the h3 under "Usage" becoming 1.2.1. Each link points to its heading's id attribute, which is why the sample headings carry ids.
The tool scans the pasted HTML for h1 through h6 elements in document order and records each heading's text and its id attribute. The TOC's shape comes from heading levels alone: an h3 following an h2 becomes a nested child of that h2, an h1 starts a new top-level entry. Headings that are not present in the paste cannot appear, so the outline matches exactly what you give it.
Every entry is an anchor element whose href targets the id of its heading, so the TOC works only where those ids exist on the page. With numbering enabled, each entry gets a decimal number computed from its position: top-level headings count 1, 2, 3, each nested level appends its own counter (1.2.1), and the count restarts under every top-level heading. Numbers describe position in the outline, not anything in the heading text.
Anchor links only work when the page contains an element whose id matches the href. The TOC targets the id attributes of the headings you pasted, so if your document's headings lack those ids, or use different ones, the click has nowhere to go. Compare each href to the ids on the page and add matching ids to the headings.
Not directly, no. The tool reads heading elements from the HTML you paste, and Markdown markers like ## Title are not HTML headings, so nothing would be detected. Convert the Markdown to HTML first, or paste the rendered page, and then generate the TOC from that.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Format, validate, and beautify JSON with syntax highlighting and error detection.
Encode text or files to Base64 and decode Base64 strings back to their original form.
Format and indent SQL queries for better readability across all major dialects.
Convert HTML markup into clean Markdown syntax with support for tables and lists.
Write Markdown and see the rendered HTML output in real time with live preview.
Visualize unified diffs and patch files with color-coded additions and deletions.