Website Structure Examples

The structure of a website — also called its information architecture — is how its pages are organized and linked together. If the homepage, the navigation menu, and the footer are the signposts, the structure is the map behind them: which pages exist, how they group, and how many clicks it takes to reach any page.

This page delivers the example: six copyable website structure diagrams (sitemap trees) for the site types people actually build — a simple business, a service business, an ecommerce store, a portfolio, a SaaS product, and a blog — plus the flat and hierarchical shapes behind them, and the difference between a structure and an XML sitemap. It is part of the website basics library.

What is website structure?

Website structure is the way pages are grouped and connected. It covers three things:

1. Hierarchy — which pages sit above which (the tree).
2. Navigation — the menus and links visitors click to move around.
3. Internal links — the in-content links that connect related pages.

A clear structure matters for the same reason a table of contents matters in a book: visitors can predict where things live, and search engines can follow the links to discover every page. Google's own guidance on organizing a site is to keep it logical and to group topically similar pages so both users and search engines understand how pages relate.

Three words are easy to mix up, so here is the distinction in one table:

An XML sitemap is often confused with the structure itself. It is not the structure — it is a file that describes the URLs so search engines can find them. The trees on this page are the structure; the XML sitemap section at the end shows the file that reflects it.

Flat vs hierarchical website structure

Every website structure is one of two shapes (or a mix of both).

Flat structure: most pages are one click from the homepage. There is little or no nesting.

FLAT
example.com
+-- Home
+-- About
+-- Services
+-- Reviews
+-- Contact
+-- Privacy

Hierarchical structure: pages are grouped into sections, and sections sometimes have their own subsections. Some pages are two or three clicks deep.

HIERARCHICAL
example.com
+-- Home
+-- Services
|   +-- Landscaping
|   +-- Irrigation
|   +-- Hardscaping
+-- Projects
|   +-- Residential
|   +-- Commercial
+-- Blog
+-- Contact

Most real sites sit between the two: a mostly flat site with one or two grouped sections, or a hierarchical site that keeps the top-level menu short. A common rule of thumb is to keep any page within three clicks of the homepage and to keep the top-level navigation to roughly five to seven items.

The page-level layout inside each box of the tree is the wireframe — see the website wireframe example for how each page breaks into header, hero, content, and footer.

Sitemap tree examples

Each tree below is a complete website structure example you can copy, adapt, and use as the starting point for your own site. They are drawn as plain-text trees; copy the block, replace the page names with yours, and you have a sitemap.

Simple business site (flat)

The flat structure keeps every page one click from home. It suits a small business with a handful of pages — the structure the business website examples page shows in finished form.

SIMPLE BUSINESS — flat structure
example.com
+-- Home
+-- About
+-- Services
+-- Reviews
+-- Contact
+-- Privacy

Why it works: with six pages there is no reason to bury anything. The homepage, the navigation, and the footer link straight to every page, so nothing is more than one click away.

Service business (hierarchical)

When a business offers several services or has a portfolio of projects, the pages group naturally. Related pages live under a section instead of all cluttering the top menu.

SERVICE BUSINESS — hierarchical structure
example.com
+-- Home
+-- Services
|   +-- Landscaping
|   +-- Irrigation
|   +-- Hardscaping
+-- Projects
|   +-- Residential
|   +-- Commercial
+-- About
+-- Blog
+-- Contact

Why it works: the visitor chooses a broad service first, then a specific one. The navigation stays short (Home, Services, Projects, About, Blog, Contact) while every real page is still only two clicks deep.

Ecommerce store

A store's structure follows the buying path: browse the catalog by category, drill into a subcategory, and land on a product. Support and policy pages hang off the bottom because they are visited rarely.

ECOMMERCE — store structure
example.com
+-- Home
+-- Shop
|   +-- Men
|   |   +-- Shirts
|   |   +-- Jackets
|   +-- Women
|   |   +-- Dresses
|   |   +-- Knitwear
|   +-- Sale
+-- About
+-- Help
|   +-- Shipping
|   +-- Returns
+-- Policies
|   +-- Terms
|   +-- Privacy
+-- Blog

Why it works: product pages are grouped so a shopper and a search engine can both understand the catalog. The ecommerce website examples page shows real stores that follow this pattern.

Portfolio

A portfolio keeps the work visible and the rest minimal. The work grid is one click from home, each project is a page under it, and contact is the closing action.

PORTFOLIO — portfolio structure
example.com
+-- Home
+-- Work
|   +-- Project: brand refresh
|   +-- Project: mobile app
|   +-- Project: campaign site
+-- Services
+-- About
+-- Contact

Why it works: the client lands on the work in one click and finds the contact path in one more. See the structure in finished form on the portfolio website examples and personal website examples pages.

SaaS or product site

A software product site has three audiences to serve — visitors deciding, customers learning, and users needing help — so it splits into three clean sections: marketing pages, documentation, and a blog.

SAAS — product site structure
example.com
+-- Home
+-- Product
|   +-- Features
|   +-- Pricing
+-- Docs
|   +-- Getting started
|   +-- Guides
|   +-- API reference
+-- Blog
+-- Support
+-- Login

Why it works: each section has a distinct job and its own audience, which makes both navigation and search understanding predictable.

Blog or content site

A content site groups articles under topic categories. The topic pages are the hubs; individual posts are the leaves.

BLOG — content site structure
example.com
+-- Home
+-- Topics
|   +-- SEO
|   |   +-- Post: how to structure a website
|   |   +-- Post: XML sitemap basics
|   +-- Design
|   +-- Marketing
+-- Resources
+-- About
+-- Contact

Why it works: a reader can browse a topic or land on a single post, and the topic page links the related posts together — the same hub-and-spoke idea behind content clusters.

The sitemap tree as HTML you can open

The trees above are readable and copyable as text, but you may also want a version you can open in a browser. The file below renders the ecommerce sitemap tree as real nested boxes. Copy it, save it as sitemap-tree.html, and double-click it to open.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ecommerce sitemap tree - Basic Website Example</title>
<style>
  body { font: 15px/1.5 system-ui, -apple-system, sans-serif; max-width: 620px; margin: 2rem auto; padding: 0 1rem; color: #334155; }
  h1 { font-size: 1.25rem; margin-bottom: 1rem; }
  ul { list-style: none; margin: 0; padding-left: 1.25rem; border-left: 2px solid #cbd5e1; }
  li { margin: 6px 0; position: relative; }
  li::before { content: ""; position: absolute; left: -1.25rem; top: .7em; width: .9rem; height: 2px; background: #cbd5e1; }
  .root { border-left: 0; padding-left: 0; }
  .root > li { font-weight: 600; }
</style>
</head>
<body>
  <h1>Ecommerce sitemap tree</h1>
  <ul class="root">
    <li>Home
      <ul>
        <li>Shop
          <ul>
            <li>Men
              <ul><li>Shirts</li><li>Jackets</li></ul>
            </li>
            <li>Women
              <ul><li>Dresses</li><li>Knitwear</li></ul>
            </li>
          </ul>
        </li>
        <li>About</li>
        <li>Help
          <ul><li>Shipping</li><li>Returns</li></ul>
        </li>
        <li>Contact</li>
      </ul>
    </li>
  </ul>
</body>
</html>

How to structure a website

Six examples give you the shapes; this is the process that produces one:

1. List every page the site needs. Write them all down — every service, product, post, and policy page — before you think about hierarchy.
2. Group pages into sections. Put related pages together and give each group a name. Five to seven top-level groups is plenty; everything else nests.
3. Order top to bottom by importance. The most important sections go at the top of the tree and in the navigation.
4. Check the click depth. Every page should be reachable in three clicks or fewer from the homepage. If a page is deeper, promote it or flatten the tree.
5. Turn the tree into navigation. The top-level sections become the main menu; secondary pages go in drop-downs, the footer, or in-content links.

The outcome is a sitemap tree you can hand to a designer (who will draw the wireframe) or a developer, with every page accounted for and nothing orphaned — no pages left with no links pointing to them.

XML sitemap vs information architecture

This distinction is worth its own section because the two are constantly conflated.

• Information architecture (the structure) is the design of how pages relate. It lives in the navigation, the hierarchy, and the internal links, and it is something visitors experience.
• An XML sitemap is a machine-readable file that lists the site's URLs so search engines can discover them. It is a reflection of the structure, not the structure itself.

A real sitemap file looks like this:

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://example.com/</loc>
    <lastmod>2026-08-01</lastmod>
  </url>
  <url>
    <loc>https://example.com/services</loc>
  </url>
  <url>
    <loc>https://example.com/contact</loc>
  </url>
</urlset>

Each <url> block lists one address and optional metadata such as <lastmod> (the last-modified date). Search engines read the file to learn which URLs exist. It lists the same pages the tree above shows, but the file itself does not organize them.

A clean structure also helps the website URL examples and the website title examples do their jobs: descriptive paths mirror the hierarchy, and clear titles tell visitors and search engines what each page in the tree is about.

Copyable website structure template

Use this blank sheet to draw your own structure. Copy it, fill in the brackets, and list the pages top to bottom.

# Website structure template

Site name:  [Site name]
Site goal:  [What the site exists to do]
Audience:   [Who visits, in one line]

Top-level sections (five to seven items):
1. [Section 1]
2. [Section 2]
3. [Section 3]
4. [Section 4]
5. [Section 5]

Sitemap tree (draw it here):

example.com
+-- Home
+-- [Section 1]
|   +-- [Subsection]
|   +-- [Subsection]
+-- [Section 2]
+-- [Section 3]
+-- [Footer links: About, Contact, Privacy, Terms]

Checklist before you build:
- [ ] Every page on the list is in the tree (no orphans)
- [ ] Every page is reachable in three clicks or fewer
- [ ] The five-to-seven top-level items match the main navigation
- [ ] Support pages (About, Contact, legal) are linked from the footer

FAQ

Where to go next

The tree is the whole-site map; the pages around it cover the next steps. The website wireframe example shows what each page inside the tree looks like, and the HTML website example turns one page into working code. To see these structures filled in with real content, browse the website examples library, and keep every planning document — including this structure template — in the templates collection. The website audit report example is the tool for reviewing a structure that already exists.