A long post is easier to read when visitors can see what is inside and jump to the part they need. This free Table of Contents Generator reads your post HTML, finds your headings, adds an ID to each one, and builds a ready-to-paste list of links. Everything runs in your browser, and your content is never uploaded.
Table of Contents
How to Use the Table of Contents Generator
- Paste your post HTML. In Blogger, open your post, switch to HTML view and copy the content. Paste it into the first box, or click Try Sample to see how it works.
- Choose your heading levels. H2 and H3 are selected by default. Add H4 only if your post is very long.
- Choose the style. Pick a bulleted or numbered list, a nested or flat structure, a wrapper and a title.
- Copy the TOC code. Paste it into your post where you want the list to appear, usually right after the introduction.
- Copy the post HTML with heading IDs. Replace your post content with this version, so every heading has the ID that its link needs. You can skip this step only if all your headings already have IDs.
- Publish and test. Open the post and click each link to confirm it jumps to the right section.
The results update as you change the settings. The preview links do not jump anywhere, because the headings are in your post, not on this page.
Settings Explained
| Setting | What it does | Our advice |
|---|---|---|
| Heading levels | Chooses which headings (H2, H3, H4) appear in the list. | H2 and H3 are enough for most posts. |
| List style and structure | Bulleted (ul) or numbered (ol). Nested puts H3 links under their H2, and flat shows one list. | Use numbered only if your sections follow a sequence. Nested is easier to scan in long posts. |
| Wrapper | Collapsible (details, open or closed), a plain nav box, or the list only. | Collapsible and open is a good default, because readers can hide the list on long posts. |
| Title | The text shown above the list. | Keep it short. In box mode, an empty title shows no title. Collapsible mode falls back to "Table of Contents". |
| ID prefix | Adds text in front of new heading IDs, such as toc-. | Optional. Useful if other code on your page uses similar IDs. |
Why Add a Table of Contents?
A table of contents (TOC) is a list of links at the top of a post. Each link points to a heading further down the page. For this to work, every heading needs a unique id attribute, and every link needs to point to it, for example href="#how-to-use". Doing this by hand is slow and easy to get wrong.
- Better reading experience. Visitors see the structure of a long post at a glance and can jump to the answer they need.
- Clearer page structure. Google has said it may use section anchors to show "jump to" links in search results. This is automatic, only happens for some queries, and is never guaranteed. See Google's older post on named anchors.
How the Tool Creates Heading IDs
- Existing IDs are kept. If a heading already has an
id, the tool uses it as it is. If two headings share the same existing ID, the tool warns you. - New IDs come from the heading text. The text is lowercased and spaces become hyphens, so "How to Use the Tool" becomes
how-to-use-the-tool. Letters from other languages are supported. If an ID would start with a number, the tool addss-in front, because some scripts and CSS selectors handle those IDs badly. - Duplicates are handled. If two headings would get the same ID, the second one becomes
-2, the third-3, and so on. The tool also avoids IDs already used anywhere else in your HTML. - Only your chosen levels change. Other headings are left as they were. Headings inside comments,
pre,script,styleandtextareablocks are ignored. - Link text is plain text. Tags inside a heading are removed from the link text, so the list stays clean.
Best Practices for Headings and Your TOC
- Start your content with H2. In many Blogger themes, the post title is already the main heading (H1).
- Do not skip levels when you can avoid it. Go from H2 to H3, not from H2 to H4. It is better for readers and screen readers.
- Write descriptive headings. "How to Use the Tool" is a better anchor than "Step 2".
- Keep the TOC short. A list with 30 links is harder to use than the post itself, and a post with only two or three sections does not need a TOC at all.
- Update IDs when you rename a heading. The tool keeps existing IDs, so if you change a heading's text later, change its ID and link too.
Limitations to Know
- It needs HTML, not visual text. Paste your post from HTML view. Text copied from the visual editor does not contain heading tags.
- Switching back to the visual editor can change your markup. After you paste the final HTML in Blogger, stay in HTML view and publish from there.
- Only H2, H3 and H4 in your post HTML are read. Headings created by scripts or widgets after the page loads are not in your post HTML, so the tool cannot see them.
- The output has no styling. It is plain HTML without CSS classes, so it follows your theme. If your own CSS does not apply, our guide on CSS specificity explains why.
- Your theme may already add a TOC. Some Blogger templates build one automatically. If yours does, do not add a second one. If you are switching templates, see how to install a Blogger template properly.
Frequently Asked Questions
Is the Table of Contents Generator free, and is my content uploaded?
It is free and needs no signup. Your HTML is processed in your browser and is not sent to a server.
Does a table of contents improve my Google ranking?
Not directly. It improves navigation and makes your page structure clearer. Google may show "jump to" links in some results, but this is automatic and never guaranteed.
Do I need to replace my post with the second output?
Yes, if your headings did not have IDs. The links only work when each heading has a matching ID. If every heading already has an ID, you only need the TOC code.
Why does the tool say no headings were found?
Your pasted content may not contain H2, H3 or H4 tags, or those levels may be unticked in the settings. Make sure you copied the post from HTML view, not from the visual editor.
Can I use this tool on a website that is not Blogger?
Yes. The tool works with any HTML that contains heading tags, so you can use it for WordPress, a static site or any other page.
Final Thoughts
A table of contents is a small addition that makes a long post easier to use. Paste your HTML, choose a few settings, copy the two outputs and test the links before you publish. Use clear headings and keep the list short, and your readers will find what they need faster.