How do I create a site map for my 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 is 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. Changing the type of bullet used in the list makes the nested ones more clear. This is addition to nested lists being indented a little more further.

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. This can also be done using CSS with the list-style-type property. I takes the same values – disc (default), circle, square.