A site map is one page or sometimes a set of pages, which lists all, or most of the pages on a web site.

If your web site is small, consisting of only a few pages, you can have links to all these pages from one page – the site map.
On the other hand, if your site consists of hundreds of pages segregated into directories (hopefully!), the site map of your web site might run into 2 or more pages.
As the term suggests a site map is a map of the web site and can be a list of links or a more complex representation. However, my advice is to keep the site map as simple as possible.

Here is a basic site map of webdevelopersnotes.com
(I have only displayed the important links)

• Home page
• Tutorials
• Web design Templates
• Web Graphics Design
• Web Development Tips and Tricks
• Web Page Design
• Web Development Resources
• Web Development Services
• Feedback
• Link to WebDevelopersNotes.com
• The Webmaster
• Privacy Policy
• WebDevelopersNotes.com Charity Drive
• WebDevelopersNotes.com Disclaimer

Creating a Site Map for your web site

The simplest way to create a site map is to use the HTML Unordered Lists tag <UL>. The tag can be employed to create simple one-level lists and also display the hierarchical structure of your web site by nesting lists if your site s more complex.

The Unordered Lists tag <UL> supports a neat attribute called Type with which you can specify the type of bullet you want for the list – disc, circle or square.

Let us look at an example:

• Electronics
  • DVD Players
  • V.C.R.s
  • Computers
    • Desktops
    • Laptops
    • Palmtops
  • Portable MP3 players
  • T.V.s
• Automobiles
  • Cars
  • Buses
  • Motorcycles
  • Scooters
• Furniture
  • Beds
  • Tables
  • Chairs

The HTML code for the above is:

<ul type="disc">
<li>Electronics
	<ul type="square">
	<li>DVD Players</li>
	<li>V.C.R.s</li>
	<li>Computers
		<ul type="circle">
		<li>Desktops</li>
		<li>Laptops</li>
		<li>Palmtops</li>
		</ul>
	</li>
	<li>Portable MP3 players</li>
	<li>T.V.s</li>
	</ul>
</li>
<li>Automobiles
	<ul type="square">
	<li>Cars</li>
	<li>Buses</li>
	<li>Motorcycles</li>
	<li>Scooters</li>
	</ul>
</li>
<li>Furniture
	<ul type="square">
	<li>Beds</li>
	<li>Tables</li>
	<li>Chairs</li>
	</ul>
</li>
</ul>

Note how the hierarchical structure is displayed using nested Unordered Lists <UL> tag. We have also used the TYPE attribute and specified the kind of bullet we want for each list.

Why is a Site Map important for a web site?

An important point to remember ALWAYS is that people come to your site looking for information.
Net surfers are a ruthless lot. If they find information quickly, they stick around; else, they click the “Back” button on the browser, close the browser window or simply go to another web page.

So the most important reason a site map is indispensable is because it helps the visitors to understand the site structure and layout and thus, quickly gain access to what your site has to offer.
A site map is a page wherein the structure of a web site is clearly shown to a visitor. They can then choose the page to which they want to go with just one click.

In addition to the advantages a site map offers to “human” visitors, it is also important for “robotic” visitors from search engines. As a web developer your aim should be to get all public pages on your web site in the search engine database. Since a site map carries links to all pages from one page, it is an ideal candidate to submit to a search engines. Submission of the site map to a search engine might help in getting all web pages indexed quickly by the search engine. I may be incorrect since I have no data to support this point but it just seems logical. However, on a similar note, there are search engines that limit the depth of searching on a web site from the homepage. For example, if you have a page buried deep inside the directory structure on your web site, it might not be picked up by such search engines. In such cases, the importance of a site map is that it pushes the search engine to go directly to the page instead of hunting for links.

There have been clients of mine who got back saying that their site map ranks higher for a particular key word that the actual page which has been optimized for that key word. Some of them like this while others mention that they would prefer of visitors go directly to the actual page.
So if you don’t like the site map on your web site to rank high, you can always use the NOINDEX attribute of the META tag.

Two important links:
1. How does your web site appear in text web browsers (and, thus, to robots) – go to the Lynx viewer -> http://www.delorie.com/web/lynxview.html. This is such a good tool. It lets you see your site how a search engine would.
2. To know how may pages Google has indexed on your web site type “site:mywebsite.com” in the Google search field.

Large web sites might have hundreds of pages. For such sites, the developer might create dynamic and interactive navigations JavaScript drop down menus making it easy for the human visitors to go quickly to a desired web page. However, a robotic visitor would not understand such menus at all and thus, it is very important of such web sites to have site maps.

If you use a JavaScript navigational drop down menu on your site make sure you include a link to the sitemap page inside the <NOSCRIPT> tag. So if a visitor is using a browser which does not support JavaScript or has JavaScript turned off, he or she will at least know the site structure.

A site map helps you in planning your site before you even start creating it. Once you decide which pages you want, your job is actually made a lot simpler when you start designing the web pages. At the beginning of each web site project, I ask my clients for the site structure. This is simply the site map. A site structure helps me in understanding the number of pages on the site and how they would be laid out. For example, if there are only 6 main pages, I would put links to these pages in a horizontal navigation menu. However, if there are more than 12 main pages, I would prefer to go for the standard left hand side navigation menu system as it would be difficult to put 12 links horizontally in one row.
Thus, another important point is that a site map should actually be the first step in planning for a web site.

A final point to push my argument of the importance of a site map – Google in its Webmaster Guidelines recommends that sites should have a site map.

Important points for a good site map

Here are some hallmarks of a good site map, which helps visitors at finding information quickly on your web site

• The site map should be the simplest page on your web site.
• Do not give a fancy name to the site map link such as “Web Site Tree” – keep it as “Site map”, this way your visitors understand immediately what you mean.
• You should always avoid “dynamic” site maps. Those in which the visitors have to “work” their way to get hold of information. Remember, the reason visitors comes to a site map page is because they are lost. To make them work again for something that you can display as a simple static link will just kill the purpose of having a site map.
• If the site map is list of text links, be sure to use the TITLE attribute of the anchor tag and include keywords inside it.
• It is a good idea to put a sentence describing the page contents below the link for that page on a site map.
• A site map should not be the primary navigation on your web site it should complement it.
• A link to the site map page is very important and all pages should carry this link. The site map link can be included with other links in the main menu on your web site or placed at a section on the web page from which is it clearly visible.
• Other important aspects on a web site should complement site maps. For example, the link color for visited links should be different from that of non-visited links so that visitors understand which pages they have already seen and thus, save time.

Site maps and other nice ways to help visitors quickly locate information on your site

In addition to including a site map on your web site, you should also to display at the top of each web page, the hierarchical position of that web page. You can find this on this page too – just above the title “Site maps and other nice ways to help visitors quickly locate information on your site” you can find the hierarchical position on this web page on www.webdevelopersnotes.com.

If your hosting service allows you to create your own error pages, you can develop each of the error page (esp. the 404 Page Not Found) as a site map. I usually do this for errors, 400, 403, 404 and 500. Click for details on server error codes.

A question: if the web site is small and all pages link to each other… is there a need for a site map?
Well, you should always have several paths to go to a page to assist both human as well as robotic visitors and there is no harm in actually creating links to pages… is there?

Finally, it’s always a good idea to use a “Search” on your web site. There are several ways you can go about this – write a search program (script) for your web site is a server-side language, download a free, shareware or a paid one and install it on your web site, use one of the several services available on the web, including Google search!

Now you might ask why we need a site map once we have a web site “search” feature? Remember, a site map is created for both “human” and “robotic” visitors. A human would know what to search for but you need to help the webbot to locate pages.

Scripts to create Site maps for your web site

I have describe before how you can create a site map using the HTML Unordered list tag. However, if you prefer to automate the creation of the site map on your web site you can find several scripts and programs online.

The site map creation programs and scripts differ in features but all result in a good looking site map for your site.

Likno’s AllWebMenus
AllWebMenus allows you to create site maps in HTML format, making your web sites search engine friendly!
You can choose among ready-made templates for the look of your site map and of course you can edit the produced HTML file with your favorite authoring tool to give it your own look and feel.
The best news is that this feature is FREE and no purchase of AllWebMenus is required!

SearchBliss Site Map Generator
Create a site map instantly and make your site surfer friendly and easier to navigate. You may also purchase your own with NO links back to SearchBliss and increase your website “stickiness” by offering this free resource to your own visitors!

FreeFind
FreeFind’s site map creator is integrated with their site search technology and can be used together with their search engine, or separately without the use of their search engine.

SiteMapper

sitemap
sitemap indexes all pages under the current directory and writes an HTML map page to standard output. The code looks for description information for each page in a meta `description’ header; if it doesn’t find one, the page is omitted from the index.

Links on web pages are underlined by default. However, if underlined links do not suit the design you have prepared for the web page, we can easily remove them by employing style sheets.

<style>
<!--

a   {text-decoration:none}

-->
</style>

The entire code has to be placed inside the <head> of the HTML document or can reside in an external style sheet (.css) file.

There are a few more features that can change the look of links on a web page. Experiment with them. Here is a code that makes all links appear in bold Verdana font, size 10 in orange color.

<style>
<!--

a   {text-decoration:none;
        font-family:Verdana;
        font-weight:bold;
        font-size:10;
        color:#FF9900}

-->
</style>

Important
Links on the Internet are identified by underlined text. You can read about the pros and cons of removing underlines from links.

The color of link on a web page is set using the link attribute of the <body> tag. The default color is blue (#0000FF). That is, if you don’t supply a color value (or color name) to the link attribute, the browser makes all the links on the web page blue in color. Specifying another value, say green, to the link attribute will turn all links in the document into green color.

Two different colors for links

Only one color can be set through the link attribute. With Style Sheets, you can have links of different colors and styles in the same document.
Styles sheets can be applied to documents in three different ways. In this article, I’ll cover two ways to embed style information on a web page.

Inline Styles

<a href="someplace.html" style="color:#FF00FF">Someplace</a>

With inline styles, the style information is placed inside the <a> tag. The style consists of a property:value pair. In this case, the color property makes the link pink (hexadecimal code for pink is #FF00FF).

Here is a link to Someplace

In addition to color, style sheets also allow you to set other values for the link such as font size, font face and text decorations.

<a href="someplace.html"
style="color:#CC0000;text-decoration:none;font-size:14pt;
font-face:Arial, Verdana, Sans-serif">
Someplace</a>

There are four property:value pairs each is separated from the other by a semi-colon. font-size sets the size to 14 points, text-decoration removes the underlines from the link and font-family specifies the font to be used.

Here is another link to Someplace

Embedded Styles

Inline styles are similar to the <font> tag. Populating a page with these is considered bad programming practice. It’s better to include all the style information inside the document HEAD section. The Styles placed in the head are enclosed in the <style>-</style> tags.

<style type="text/css">

a.implink        {color:#FF9900;
                  font-size:12pt;
                  text-decoration:underline;
                  font-family:Verdana, Arial, Sans-serif}
</style>

• The style has four property:value pairs separated by semicolons.
• All the property:value pairs are placed inside curly braces.
• The style information applies to A, which is known as the selector. Furthermore, the selector is given a name, implink, through which it will be called from the class attribute.

<a href="someplace.html">Someplace</a>

Links on web pages are created using the anchor <a> tags. These links can point to a different document on the Internet or to some anchor on the same page. Documents linked in this manner need not be HTML (or PHP/ASP) files. You can place a link to any kind of file.

So if you have a program in .exe format or a .zip file you can attach it to a link like:

<a href="brahms.zip">Download Brahms Waltz #3 (zip file)</a>

When you click on such links, and your browser is not able to display the file on its own, it pops up a window asking you to “open” or “save” the file. If you choose to open the file, the browser will launch the application to which such files are attached or else display a window asking you to pick the software, if it cannot open the software that uses such file formats. You can also specify a target location on your systems’ hard drive to save the file to a desired location.

Do you want a newspaper kind of layout for your web pages? This tip will show you how to do that using a thin (1 pixel width) vertical separator.

It involves designing pages with fixed sizes and a good working knowledge of the <TABLE> tag. If you want to know more about HTML tables, go to the advanced HTML tutorial.

The layout above consists of a table 301 pixels wide. This table has only one row with three cells. The first and the last cells are 150 pixels wide while the middle one is 1 pixel wide. It’s the center cell that makes the vertical separator.

The code is:

<table width="301" cellpadding="0" cellspacing="5" border="0">
<tr>
<td>So you want a newspaper kind of...</td>
<td width="1" bgcolor="#000000"><img src="1-1.gif" width="1"
height="1" border="0" alt="" /></td>
<td>It involves designing pages with...</td>
</tr>
</table>

Important points

• Width of the table is specified in pixel values. This yields a fixed table size. You can use % values in the width attribute but then would have to test the code in both Internet Explorer and Netscape Navigator.
• The cellpadding attribute is set to zero. Any other value will result in thickening of vertical separator.
• Cellspacing will add some space around the text in columns, which indents in from the separator. You can choose any value for this attribute to suit your needs.
• The width of the middle cell determines the thickness of the vertical separator. In this case, its set to 1 because that’s what we want.
• The bgcolor of the middle cell is black (#000000). This results in a black colored separator. You can thus change the color of the separator by changing the background color of the table cell.
• The content of the center cell is a 1 X 1 transparent pixel image – 1-1.gif in the code above. Some web developers might use the Netscape Communicator specific <SPACER> tag, but I suppose that this will be dropped in the next version of the browser and is best avoided. The 1 X 1 pixel image is only 49 bytes! You can download its zip file from here. (Note: You cannot leave the center cell empty. You can’t use &nbsp; since this will thicken the separator. The best bet is to use a 1 X 1 pixel transparent gif.