HTML Table of Content Generator Tool(Free)

1. Source & Basic

TOC Title

Max Depth

Position

Toggle Style (Show/Hide)

Exclude Last H2 (e.g. Conclusion)

⚙️ Advanced Styling (Pro)

Heading List Styles

H2 Style

H3 Style

H4 Style

Background

#f8fafc

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

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

📋 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.

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.