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.
Sponsored Links
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.