This generator reads the headings in your article, gives each one a unique id, and builds a nested list of jump links that points at them. Paste HTML or Markdown, choose which heading levels to include, and copy a ready nav block, a Markdown list, or your HTML with the anchor ids already added.
| Input | Headings read from | Outputs |
|---|---|---|
| HTML | <h1> to <h6> elements | Nav HTML, Markdown list, article with ids added |
| Markdown | Lines starting with # to ###### | Nav HTML, Markdown list |
| Existing ids | id="..." or {#custom-id} | Kept as they are |
| Repeated headings | Same text twice | Second id gets -1, then -2 |
Updated
Long guides are easier to scan and share when readers can jump to a section. The links also give each part of the page its own address, so you can send someone straight to the paragraph they need.
Paste an article as HTML or Markdown. The headings are read, given unique anchor ids, nested by level and turned into an HTML nav, a Markdown list and, for HTML input, a copy of your article with the missing ids added.
A two-column layout where the contents stay in view and headings clear a fixed header.
The frame is short, so scroll inside it: the contents column stays pinned while the article moves.
<style>
.layout { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; }
.toc { position: sticky; top: 0.5rem; align-self: start; font-size: 14px; }
.toc ul { margin: 0; padding-left: 1rem; }
h2 { scroll-margin-top: 4rem; margin: 0 0 4px; }
section { min-height: 160px; }
</style>
<div class="layout">
<nav class="toc" aria-label="Contents">
<ul>
<li><a href="#budget">Set a budget</a></li>
<li><a href="#layout">Choose a layout</a></li>
<li><a href="#people">Hire people</a></li>
</ul>
</nav>
<article>
<section><h2 id="budget">Set a budget</h2><p>Plan for materials, labour and a buffer.</p></section>
<section><h2 id="layout">Choose a layout</h2><p>Galley, L-shaped or island.</p></section>
<section><h2 id="people">Hire people</h2><p>Get three written quotes.</p></section>
</article>
</div>Each heading's text is lower-cased, punctuation is dropped, and spaces become hyphens, so Choose a layout becomes choose-a-layout. Accented letters and non-Latin scripts are kept rather than stripped.
An id must be unique in the document and must not contain spaces. When the same heading text appears twice, the second copy gets -1 added, the third -2, so every link has exactly one target.
Markdown platforms make their own heading ids, and their rules differ slightly. If you publish Markdown somewhere that already adds ids, check one link after publishing; for HTML you control, use the article output so the ids match exactly.
Put the contents list after the introduction, not above it, so readers first learn what the page is about. On wide screens a sticky sidebar keeps it in reach while they scroll.
If your site has a fixed header, a jump link will hide the heading underneath it. The scroll-margin-top property adds space above the target when the browser scrolls to it, which fixes this without JavaScript.
Give each heading an id, then link to it with a hash: <a href="#set-a-budget">Set a budget</a> jumps to the element with id="set-a-budget". Wrap the links in a nav element with a list inside. This tool writes both the ids and the list.
A fixed or sticky header covers the top of the window, and the browser scrolls the heading to that top edge. Add scroll-margin-top to headings, a little larger than the header height, and the heading stops below it.
Yes. Put the nav in a sidebar column and give it position: sticky with a top value. It scrolls normally until it reaches that offset, then stays put while its column is on screen. The example below shows the CSS.
It helps readers find sections and gives each section a linkable address. Search engines sometimes show jump links to sections, but they decide when; there is no setting that guarantees it.
Related: Markdown to HTML, HTML to Markdown converter, Markdown cheat sheet, HTML formatter.
Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.