List Basics

Lists - probably the easiest HTML topic ever. So let's dive right into it...

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 bulllet 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.

<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 (not strictly necessary).

I told you it was easy, didn't I!

Nested Lists

You can also have lists within lists. 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 a prime 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 necessaey. Keep track of where all your closing tags are though, or things might not turn out as expected.

Notice in the following example that I've used some P tags to spread things out a bit.

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