H-Tag Generated Navigation

Codepen Example

Generate Table of Contents Using H-Tags

Sometimes us web developers double as content marketers. A few days ago I was tasked with writing a blog post for a client and found myself duplicating efforts by adding sections to a scrollable side navigation.

I found some packages that could help with automatically generating a hierarchal navigation, but most were inclusive to their framework (i.e. Magellan) or bloated. I wrote a Codepen replicating my own efforts.

See the Pen H-Generated Navigation by Tony Ciccarone (@tciccarone) on CodePen.

Use cases: SEO / Breadcrumbs & Better Organization

Slugged navigation and internal links are important in search engine optimization ranking and scoring. It acts as a breadcrumb and it used in structured data results. Personally I don’t read full blog posts, but I might if there was a summarized list of topics and sub-topics.

© 2019 – TonyCiccarone.com | PHP, WordPress, Laravel Development