Free HTML Table of Contents Generator

Paste your article HTML, choose a heading depth, and generate a clean, clickable table of contents in seconds. ZippaHub's free TOC generator works in your browser, requires no sign-up, and helps you create anchor links for WordPress posts, Shopify blogs, documentation, and SEO content.

1. Source & Basic

TOC Title

Max Depth

Position

Existing TOC Handling

Toggle Style (Show/Hide)

Exclude Last H2 (e.g. Conclusion)

Preserve existing heading IDs when safe

Clean scripts, empty headings, and old TOC before output

Saved Settings

Settings auto-save to a cookie on this browser. Article HTML is not saved.

Settings JSON

Advanced Styling

Heading List Styles

H2 Style

H3 Style

H4+ Style

Background

#ffffff

Title Color

#0f172a

Link Color

#334155

Hover Color

#2563eb

Hover Effect

Link Weight

Box & Border

Style

Border Width (px)

Border Color

#e2e8f0

Radius (px)

Enable Box Shadow

Scroll Offset (px) - Fixes sticky header

2. Live Preview

Paste HTML on the left to see live preview...

3. Output: TOC Code Only

4. Output: Full HTML

What This Tool Does

ZippaHub's HTML Table of Contents Generator turns article headings into a clean navigation block with clickable anchor links. It can parse H2-H6 headings, preserve existing heading IDs, remove older TOC blocks, and output either the TOC code only or the full HTML with the table of contents inserted.

How to Use ZippaHub's TOC Generator?

📋 Paste Your HTML
Copy the HTML of your blog post or article and paste it into the source box. Our tool instantly scans your content for H2, H3, and H4 tags.
🎨 Customize Your Design
Tweak the look to match your brand. Choose from custom list styles (numbers, roman numerals, bullets), adjust colors, set border radius, and enable the intelligent [Show/Hide] toggle. You can preview all changes in real-time.
🚀 Copy & Paste
Once satisfied, copy the generated code. We provide pure HTML & CSS—no JavaScript bloat. Paste it right back into your WordPress, Shopify, or custom CMS editor.

Why Add a Table of Contents?

Boosts SEO & Dwell Time: Search engines like Google love well-structured content. A TOC creates internal anchor links ("jump links"), increasing the chance of your article earning rich snippets (Sitelinks) on the search results page.
Perfect for Shopify & WordPress Bloggers: Tired of heavy, slow plugins? Our TOC generator outputs clean, inline code that won't slow down your page speed. It's the ultimate solution for Shopify store owners and WordPress minimalists.
Solves the "Sticky Header" Overlap Issue: If your website has a fixed sticky header, clicking a traditional anchor link often hides the heading under the menu. ZippaHub's Pro Generator includes a smart Scroll Offset feature, ensuring your headings land perfectly in view every time.

HTML Table of Contents Generator FAQ

Common questions about using this free TOC generator with WordPress, Shopify, blog posts, and long-form SEO content.

Does this work with WordPress?

Yes. Paste your WordPress article HTML into the tool, generate the TOC, then copy the full HTML back into your WordPress editor.

Does this tool upload or save my article HTML?

No. The tool runs in your browser. Saved settings only store TOC preferences such as colors, heading depth, and layout options, not your article content.

Can I preserve existing heading IDs?

Yes. Enable the preserve heading IDs option to keep existing anchors when they are safe. Duplicate IDs are automatically adjusted.

Can it remove an old table of contents?

Yes. Use Existing TOC Handling to remove old TOC blocks, replace only ZippaHub TOC blocks, or keep existing TOC content.

How do I fix sticky header overlap?

Use Scroll Offset to add spacing above headings when anchor links are clicked. This helps fixed headers avoid covering the target heading.