What this HTML sitemap tool produces
You get a single <nav> block with one <section> per top-level area of the site, each holding a <ul> of links. No classes you have to fight, no inline styles, no framework assumptions. It is markup you paste into a CMS page and style with your own CSS.
<nav class="html-sitemap" aria-label="Sitemap">
<section class="sitemap-group">
<h2>Blog</h2>
<ul>
<li><a href="https://www.example.com/blog/link-building">Link building</a></li>
<li><a href="https://www.example.com/blog/seo-guide">The complete SEO guide</a></li>
</ul>
</section>
<section class="sitemap-group">
<h2>Pricing</h2>
<ul>
<li><a href="https://www.example.com/pricing/teams">Teams</a></li>
</ul>
</section>
</nav>
Above the markup you also get a live preview of the same block, so you can see how lopsided your grouping is before it goes live. A section with 40 entries next to 3 sections with 2 each is usually a sign your URL structure and your information architecture have drifted apart.
How your URLs get sorted into sitemap sections
Grouping comes from the first path segment. /blog/seo-guide and /blog/link-building land under Blog. /pricing on its own, and anything else with a single segment, lands under Top-level pages. Inside each group, entries are sorted alphabetically by path, so the output is stable: paste the same list twice and you get byte-identical markup.
The segment name is humanized for the heading. Hyphens and underscores become spaces, a file extension like .html or .php is dropped, percent-encoding is decoded, and the first letter is capitalized. /case-studies/ becomes Case studies.
That is deliberately dumb, and it is a feature. The tree it produces is exactly the tree a crawler infers from your URLs. If the grouping looks wrong, the URLs are wrong.
Anchor text is the column that does the work
Add a | and everything after it becomes the link text:
https://www.example.com/pricing | Pricing and plans
https://www.example.com/blog/seo-guide | The complete SEO guide
https://www.example.com/blog/link-building
Leave the column off and the last path segment is humanized instead, so link-building renders as "Link building". That fallback is fine for a quick draft and wrong for anything you ship. Descriptive anchor text is the entire reason an HTML sitemap contributes anything to internal linking; a page full of seo-guide reads worse than one full of "The complete SEO guide" for both a visitor and a crawler weighing the link.
Tabs are treated the same as pipes, so a 2-column export from a spreadsheet or your CMS pastes in directly.
The 3 fields on this page
- URLs takes one URL per line, with the optional anchor-text column after a
|. Lines starting with#are ignored, so you can annotate a list you keep around. Duplicates are dropped and fragments are stripped. - Sitemap type is preset to HTML here. The same engine also emits standard XML, image, news, video, WordPress and visual sitemaps if you want to compare.
- Base URL resolves relative lines. Paste
/pricingwith a base ofhttps://www.example.comand you get a working absolutehref. Without a base, relative lines are reported as skipped rather than silently guessed at, and each skipped line is listed with the reason.
There are no lastmod, changefreq or priority controls here. Those are XML tags with no HTML equivalent, and this output is a web page.
Where to publish it and how to link it
Put it at a stable path like /sitemap/ and link it from the site footer on every page. That footer link is what makes it work: it turns a static list into a route crawlers actually traverse, and it gives deep pages a second inbound link from a page that is itself linked sitewide.
3 things to get right:
- Every entry must be a plain crawlable
<a href>. A list rendered by JavaScript after a click, or a set of<div>elements with click handlers, is worth nothing here. - Do not
noindexit. People do this reflexively because it "isn't real content". A noindexed page still passes links, but eventually gets crawled less, which defeats the point of building it. - Keep it current. An HTML sitemap listing pages you removed 2 years ago is a wall of soft 404s and a bad first impression for the one visitor who actually clicked it.
How many links is too many
Past roughly 200 to 300 links on one page, an HTML sitemap stops helping. Each link's share of the page's authority shrinks, and no human scans a column of a thousand entries. The tool flags this once your list crosses 300.
The fix is not a longer page. It is a shallow hierarchy: a top-level sitemap page listing your sections, and one page per section listing its contents. That mirrors how the site is organized, keeps each page readable, and gives every section hub a genuine reason to exist.
Why you still need the XML sitemap file
They are complementary, and swapping one for the other is a common mistake.
- The XML sitemap is a submission channel. It carries
lastmod, it is what you register in Search Console, and it is what gets read when a crawler wants a complete list of what changed. - The HTML sitemap is navigation and internal linking. It cannot carry
lastmod, it is not submitted anywhere, and its value is entirely in being a real page real visitors and crawlers walk through.
Publish both. They cost nothing to keep in sync when both are generated from the same URL list, which is exactly why this tool takes the same paste for either output. BlazeHive automates the content side of that pipeline end to end if you would rather not maintain the list by hand.