How to create sitemap in html

HtmlHow-ToBeginner · 3 min read

How to Create a Sitemap in HTML: Simple Guide

To create a sitemap in HTML, use a <nav> or <section> element containing nested <ul> and <li> lists with <a> links to your pages. This structure helps visitors and search engines easily find all important pages on your website.

📐

Syntax

A basic HTML sitemap uses a container element like <nav> or <section> to hold the sitemap. Inside, use unordered lists <ul> to group links, and list items <li> for each page. Each page link is an anchor <a> with an href attribute pointing to the page URL.

<nav>: Defines navigation section.
<ul>: Creates a list.
<li>: List item for each link.
<a href="URL">Text</a>: Link to a page.

html

<nav>
  <ul>
    <li><a href="/home.html">Home</a></li>
    <li><a href="/about.html">About Us</a></li>
    <li><a href="/services.html">Services</a></li>
    <li><a href="/contact.html">Contact</a></li>
  </ul>
</nav>

Output

A vertical list of links: Home, About Us, Services, Contact

💻

Example

This example shows a simple sitemap with main pages and a nested list for subpages under Services. It demonstrates how to organize links clearly for users.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple Sitemap</title>
</head>
<body>
  <section aria-label="Site Sitemap">
    <h1>Sitemap</h1>
    <ul>
      <li><a href="/index.html">Home</a></li>
      <li><a href="/about.html">About Us</a></li>
      <li>Services
        <ul>
          <li><a href="/services/design.html">Design</a></li>
          <li><a href="/services/development.html">Development</a></li>
          <li><a href="/services/marketing.html">Marketing</a></li>
        </ul>
      </li>
      <li><a href="/contact.html">Contact</a></li>
    </ul>
  </section>
</body>
</html>

Output

A webpage titled 'Simple Sitemap' showing a heading 'Sitemap' and a list with Home, About Us, Services (with sub-links Design, Development, Marketing), and Contact

⚠️

Common Pitfalls

Common mistakes when creating HTML sitemaps include:

Using only plain text without links, which makes navigation impossible.
Not using semantic elements like <nav> or aria-label for accessibility.
Creating very long flat lists without grouping related pages, which confuses users.
Forgetting to update the sitemap when pages change or are added.

Always keep your sitemap organized, linked, and accessible.

html

<!-- Wrong: No links, just text -->
<ul>
  <li>Home</li>
  <li>About Us</li>
  <li>Services</li>
  <li>Contact</li>
</ul>

<!-- Right: Use links for navigation -->
<ul>
  <li><a href="/home.html">Home</a></li>
  <li><a href="/about.html">About Us</a></li>
  <li><a href="/services.html">Services</a></li>
  <li><a href="/contact.html">Contact</a></li>
</ul>

Output

Wrong: Just text list with no clickable links. Right: List with clickable links to pages.

📊

Quick Reference

Tips for creating effective HTML sitemaps:

Use <nav> or <section> with aria-label for accessibility.
Group related pages using nested <ul> lists.
Use clear link text describing the page.
Keep the sitemap updated as your site changes.
Make sure links use correct URLs and open in the same tab.

✅

Key Takeaways

Use semantic HTML elements like

Include clickable links for each page to help navigation.

Organize pages with nested lists for clarity and usability.

Add accessibility labels like aria-label for screen readers.

Keep your sitemap updated to reflect your website structure.