In a Nutshell

Adding a site map makes your site easier to navigate and is a priority 2 checkpoint for the WAI. You can generate one automatically from your site's menu using a server side include

More Tips

See the Full list of Quality Tips for more shared wisdom.

Draft - Add a site map

This is a draft "webmaster tip", under work and review by the Quality Assurance Team, and shouldn't be considered as an official tip from W3C while it remains a draft.

Generating a navigation bar

Use CSS to generate your navigation bar from a list

The tip Unordered lists: more than just bullets introduces you to using CSS to format an unordered list into a navigation or menu bar

Typically, you might use a server side include (.ssi) to include your menu bar into each page. Your webpage would then have to be a server parsed html file (.shtml) rather than a normal .html file.

Generating the site map

A site map is a list of all the links on a site - but we already have one in our navigation bar. All that's necessary is to generate our site map in two stages using a nested include. The first include applies the formatting to the menu list itself, which we'll place in the second include. We can then call the second include by itself.

Including a site map is required to satsify WAI checkpoint 13.3, a Priority 2 checkpoint.

with shtml

The menubar is included as one of the first elements of the document with a command such as:

<!--#include file="menu.shtml" -->

The source for the menu.shtml file

<div id="menu">
<map title="navigation bar" id="nav">
<!--#include file="menu.ssi" --?>
</map>
</div>

where menu.ssi is the list of the files in our site, each one a .shtml file which calls menu.shtml

Notice how we've the menu itself is enclosed in a <map> element. This enables user agents to bypass the menu bar in accordance with WAI checkpoint 13.6, which is a Priority 3 checkpoint.

with php

With php, the technique is exactly the same. The menu is included with:

<?php include("menu.php"); ?>

where the contents of menu.php are:

<div id="menu">
<map title="navigation bar" id="nav">
<?php include("menu_php.ssi"); ?>
</map>
</div>

Further Reading

About the "QA Tips"

the W3C QA Tips are short documents explaining useful bits of knowledge for Web developers or designers, hosted and produced by the Quality Assurance Interest Group at W3C.

While the tips are carefully reviewed by the participants of the group, they should not be seen as anything else than informative bits of wisdom, and especially, they are not normative W3C technical specifications.

Learn more about the Tips, how to submit your own pearls of wisdom, and find all the other QA tips in the Tips Index.

Created by Michael Lavocah for the W3C QA IG.
Last modified $Date: 2006/09/22 01:49:12 $ by $Author: ot $