10 HTML Sitemap Design Patterns: Selection and Review Examples
July 10, 2026
Author: Shusaku Yosa
An HTML sitemap helps visitors understand what a website contains and choose a route to useful information. It is more than a visual arrangement of links. Start with visitor tasks and page labels, then choose a layout. The ten patterns below are design concepts, not claimed success stories from real companies, and none guarantees rankings or conversions.
Distinguish HTML sitemaps, XML files, and planning diagrams
Three different things are often called a sitemap. An HTML sitemap is a page for people; an XML sitemap supplies URL information for search engines; and a planning diagram helps a team define a site before building or changing it. A box-and-line planning diagram does not have to become the visitor-facing interface.
Type | Primary purpose | What to review |
|---|---|---|
HTML sitemap | Help people locate information | Labels, groupings, links, and operation |
XML sitemap | Help search engines discover URLs | Appropriate URLs and related information |
Planning diagram | Define responsibilities and structure | Page roles, relationships, and change scope |
W3C’s sitemap technique describes an overview and an alternative way to locate content. A public XML file can also be viewed by a person, but it is not designed as everyday navigation. Google’s sitemap guidance also explains that submitting URLs does not guarantee crawling or indexing.
Compare ten patterns by task, fit, and constraints
Treat each miniature layout below as a starting point. Arrows show grouping, not verified links or a required number of clicks. Different patterns can coexist: a plain categorized list might include an A–Z index and a short list of frequently needed destinations.
Pattern | Miniature layout | Best use and limitation |
|---|---|---|
1. Plain list | Services → Overview / Pricing / Getting started | Clear for a modest inventory; divide an overly long list. |
2. Hierarchical tree | Learn → Getting started → Prerequisites | Show parent-child relationships without excessive nesting. |
3. Task-based | I want to adopt → Suitability / Preparation / Contact | Useful for different visitor goals; avoid internal department labels. |
4. Color-coded | Blue + Learn; green + Services | Use color as a cue, never as the only meaning. |
5. Icon-assisted | Book symbol + Glossary | Support the text; review alternatives and redundancy. |
6. Multiple columns | Services | Learn | Company | Good for wide screens; preserve reading order when stacked. |
7. Alphabetical index | A–Z → Analytics | Useful when visitors know a term; adapt Japanese indexes to their language. |
8. Accordion | Learn [expand] → Guides / Terms | Organize long lists; test keyboard operation and state. |
9. Priority destinations | Start here / Common tasks → Full directory | Give frequent tasks prominence without hiding the rest. |
10. Footer navigation | Every page footer → Main sections | Provide a common entry point; add a full directory when needed. |
Build a page and label inventory
Build an inventory before selecting a design. Reconcile the CMS’s published pages with other available URL lists, then record language, audience, and purpose. An absent GA4 or Search Console row does not establish that a public page does not exist. Decide separately whether account-only screens or intermediate transaction steps belong in a general directory.
Page and language | Visitor-facing label | Group and reason | Owner and review |
|---|---|---|---|
________________ | ________________ | ________________ | ________________ |
Fictional introductory guide, English | Start with analytics | Learn: understand prerequisites | Editor; enter review date |
Fictional contact page, English | Discuss an implementation | Company: reach the right team | Contact owner; enter review date |
Shorten long page titles only when the meaning remains clear. “Other” rarely predicts the destination; “Company information and contact” is more useful. If multiple articles seem to belong everywhere, resolve their responsibilities before creating a giant list. The related topic-cluster guide explains that planning task.
Make color, icons, columns, and accordions usable
Combine category colors with visible words or other cues. W3C’s explanation of use of color provides the principle: people should not need to distinguish colors to understand meaning. An icon next to an equivalent text label may be redundant; an image that performs an action needs an alternative that communicates that action.
For columns, check the document’s reading order as well as the desktop appearance. For accordions, a clickable-looking heading is not enough. Review the control, associated heading, expanded state, and focus behavior. W3C’s accordion pattern describes keyboard and semantic expectations. Test the actual implementation with Tab and the appropriate Enter or Space operation; a reference pattern alone does not establish accessibility compliance.
- Check a narrow screen for overlapping or cut-off labels.
- Follow all necessary destinations using a keyboard.
- Confirm that the focused control and expanded state are understandable.
- Avoid relying only on an icon, its position, or a color to explain a category.
A fictional B2B layout and a fill-in planning template
This is a fictional small B2B website, not a real company’s interface or a performance case study. It can begin with three headings and plain text links. Decoration is optional; the information must work without it.
Services | Learn | Company |
|---|---|---|
Feature overview | Introductory guides | About the company |
Pricing approach | Glossary | Contact |
Implementation process | Operational checks | Terms |
Ask a new visitor to find the implementation process, a returning reader to locate a term, and a prospective customer to find the contact route. If “Company” does not convey the last task, try “Company and contact” and observe whether the label becomes clearer.
Planning field | Your entry |
|---|---|
Task this directory should support | ________________ |
Main groups and visitor-facing names | ________________ |
Link label and destination within each group | ________________ |
Reason for listing one page in multiple groups | ________________ |
Corresponding pages in each language | ________________ |
Inventory reconciliation date and owner | ________________ |
A footer can provide the common entrance while a dedicated page carries the longer inventory. When the list grows, revisit the categories instead of simply shrinking the font or hiding everything behind more controls.
Test information-finding tasks and maintain links
Do not turn “within three clicks” into a universal SEO rule. A short route with confusing labels can be worse than a slightly longer, understandable route. Assess whether people complete their task, where they hesitate, and whether the destination answers the promise of the link.
Task | What to record |
|---|---|
Understand service suitability | Starting point, chosen category, confusing labels, completion |
Find a related term | Category versus alphabetical route, missing entries |
Reach contact information by keyboard | Focus order, expansion behavior, destination accuracy |
Assign an owner and review the directory whenever pages are added, moved, or unpublished. Check broken links, unnecessary redirects, and language mismatches against the inventory. Google’s link guidance is also relevant to links outside the sitemap. Use the related internal-link guide for destination checks and the alt-text guide for image alternatives. Maintain the directory as a useful route to information rather than a page built only for search engines.
