List Basics

To create a list you need to tell the browser what type of list to make and what to put in the list. We'll start with an unordered list - that's one with bullet points. The tag for that is UL and you'll need a closing tag after the list is finished.

Within your UL tags you put the list items, surrounded by LI tags. You can have as many list items as you like. So it's pretty similar to Tables in that respect.

<UL>
<LI>List Item 1</LI>
<LI>List Item 2</LI>
<LI>List Item 3</LI>
<LI>List Item 4</LI>
</UL>

• List Item 1
• List Item 2
• List Item 3
• List Item 4

You can use FONT tags within or around the list items to change the look of the text. If you want to space things out a bit, add some P tags as well.

Nested Lists

You can also have lists within lists. Again just like tables within tables. This is useful when you have several layers of data to present and indenting will make things clearer. Rather than using a complex table, just use nested lists to space things out how you want. For an example, have a look at the Site Map.

To create nested lists, just put extra sets of UL tags within the main ones and add list items as necessary. Keep track of where all your closing tags are though, or things might not turn out as expected. As with everything so far be careful of overlapping tags.

Notice in the following example the use of P tags to spread things out.

<UL>
<LI>List Item 1</LI>
<LI>List Item 2</LI>

<P></P>

<UL>
<LI>List Item 1</LI>
<LI>List Item 2</LI>
<LI>List Item 3</LI>
<LI>List Item 4</LI>
</UL>

<P></P>

<LI>List Item 3</LI>
<LI>List Item 4</LI>
</UL>

• List Item 1
• List Item 2
• List Item 1
• List Item 2
• List Item 3
• List Item 4
• List Item 3
• List Item 4

You can of course have many layers of nested list, the same principle applies. And you can do exactly the same thing with numbered lists, which we'll look at next.