Site maps

Where are we?

This lesson is about linking pages together. You know how to make basic links and style them. You know how to make w00fy navigation bars.

This page’s goals

This page is about site maps. By the end of this page, you should:

  • Know what a site map is for.
  • Be able to create a site map from nested lists.

What is a site map is for?

A site map is a Web page that summarizes an entire Web site, or a big chunk of a Web site. Here’s an example, zoomed out so you can see most of it.

Traditional site map

Figure 1. Traditional site map

There’s a link for each main section of the site. Links to pages in that section are indented under it.

Some maps are horizontal, like this:

Mozilla site map

Figure 2. Mozilla site map

There’s not as much room for text with these maps, but they take up less screen space. Some maps like this are added to the bottom of every page. You can see more examples on the Web Designer Wall.

Site maps have three goals:

  • They let users get a quick overview of a site’s contents.
  • They let experienced users quickly jump to pages deep in the site.
  • They help search engines find all of the content on the site.

Let’s see how to make a traditional, vertical site map.

Site maps as nested lists

An easy way to make a site map is with nested lists. Suppose we wanted to make a site map like this for the dog nutrition site.

Simple site map

Figure 3. Simple site map

Here’s the code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Site Map</title>
    <style type="text/css">
      body {
        font-family: Verdana, Helvetica, sans-serif;
        font-size: 14px;
        background-color: #FFFFCC;
      }
      #site_map li {
        list-style: none;
        margin: 10px;
      }
    </style>
  </head>
  <body>
    <h1>Site Map</h1>
    <ul id="site_map">
      <li>
        <a href="dummy.html" title="The basics of dog nutrition">The basics</a>
      </li>
      <ul>
        <li>
          <a href="dummy.html" title="Help your puppy grow">Puppy nutrition</a>
        </li>
        <li>
          <a href="dummy.html" title="Keep your older dog healthy">Nutrition for older dogs</a>
        </li>
        <li>
          <a href="dummy.html" title="Food can help with chronic illness">Nutrition when your dog is ill</a>
        </li>
      </ul>
      <li>
          <a href="dummy.html" title="Articles on dog nutrition">Articles</a>
      </li>
      <li>
          <a href="dummy.html" title="Our bloggy nutrition updates">Blogs</a>
      </li>
      <ul>
        <li>
          <a href="dummy.html" title="What's on our minds right now">Latest entry</a>
        </li>
        <li>
          <a href="dummy.html" title="Advice from the past">Archive</a>
        </li>
      </ul>
      <li>
        <a href="dummy.html" title="Products we recommend">Products</a>
      </li>
      <ul>
        <li>
          <a href="dummy.html" title="The foundation of good nutrition">Food</a>
        </li>
        <li>
          <a href="dummy.html" title="Healthy rewards">Treats</a>
        </li>
        <li>
          <a href="dummy.html" title="For everyday vitality,and special needs">Supplements</a>
        </li>
        <li>
          <a href="dummy.html" title="Containers, recipes, gifts, ...">Other</a>
        </li>
      </ul>
    </ul>
  </body>
</html>

Figure 4. Code for a simple site map

There are nested lists, that is, there are lists inside lists. This works because browsers indent <ul>s relative to their containers.

To understand this, have a look at this code snippet:

...
ul {
  border: 1px red dashed;
}
...
<p>Some content</p>
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <ul>
    <li>Item 3</li>
    <li>Item 4</li>
  </ul>
  <li>Item 5</li>
</ul>
<p>Some content</p>
...

Figure 5. Indenting and containership

This creates:

Rendered page

Figure 6. Rendered page

You can try the page.

The style rule on lines 2 to 4 draws a border around the <ul>s, so they stand out.

The first <ul> on line 7 is contained inside the <body>. Another way to say it is that the <ul> is a direct child of, or direct descendant of, the <body>. So the browser indents its <li>s relative to the <body>.

The second <ul> on line 10 is contained in the first <ul>. So its <li>s are indented relative to the first <ul>.

This container effect makes it easy to create progressive indents. Just put one list inside another.

CC
CC

A question.

Kieran
Kieran

Go ahead.

CC
CC

I noticed that the source code in Figure 5 is indented. It sort of matches the indenting that the user sees, in Figure 6. Can you indent stuff on a Web page by indenting the HTML?

Kieran
Kieran

No, you can’t. Let me explain.

The way the HTML source code is indented in Figure 5 does not affect what the browser draws on the screen. Here’s the same code, with the indenting messed up.

<p>Some content</p>   <ul><li>
Item 1</li>
<li>
Item 
2</li>
<ul>  <li>Item 3
</li><li>Item 4
</li>
        </ul>
   <li>Item 
5</li>
  </ul><p>Some content</p>

Figure 7. Source code indenting messed up

The browser shows exactly the same thing as it did before. You can try it yourself.

So the indenting the user sees, that is, this…

Rendered page

Figure 6 (again). Rendered page

...depends on containership and styles. It is not affected by the way the way the source code is indented.

Why was I careful to indent the code in Figure 5? To make it easier to follow. If you had to change the code (for example, to add more items), which would you rather work on? The code in Figure 5, or the code in Figure 7?

Good Webers pay attention to source code indenting. It makes site maintenance (that is, changing the content) easier and more accurate.

One final note about this site map:

Simple site map

Figure 3 (again). Simple site map

Here’s a snippet from the source code:

...
#site_map li {
  list-style: none;
  margin: 10px;
}
...
<body>
  <h1>Site Map</h1>
  <ul id="site_map">
...

Figure 4 (again). Code for a simple site map (snippet)

list-style: none; removes the dots from the list items. margin: 10px; adds some space around the items, to separate them a bit. Just makes things look a little better.

Exercise: Site map

Create a site map for Puppy Swarm. It should look like this:

Site map

Upload your solution to your server. Enter the URL below.

(Log in to enter your solution to this exercise.)

Summary

On this page, you learned how to create site maps as nested lists of links.

What now?

We’re done with this lesson! Apart from the exercises. They start on the next page. Do them. You can’t claim you can make links, nav bars, or site maps until you do the exercises.

You know enough to build complete Web sites. Simple, yes, but you could make something that a small business or nonprofit could use as its first site. W00f for you!


How to...

Lessons

User login

Log in problems? Try here


Dogs