HTML Basics: Using Lists

There are three types of lists that we can use on our web pages:

• Unordered Lists
• Ordered Lists
• Definition Lists

Unordered Lists

Unordered Lists should be used when you wish to have a list of data but there is no specific order to that list. The list I’ve used above, to list the list types, is an unordered list. An unordered list can also be associated with a bullet point list.

The correct syntax for an unordered list is

<ul>
<li>A List Item</li>
<li>Another list item</li>
<li>Yet another list item</li>
</ul>

Which would give us:

• A List Item
• Another list item
• Yet another list item

An unordered list is probably the most used HTML list. It’s used as a standard bullet point list, or it’s often used to hold lists of data which is then styled (more on that next week!) to control the look of the list, and often to remove the bullet points completely. Most modern coded websites use an unordered list for their navigation menu, regardless of whether it’s a vertical or horizontal list. On Blogging Tips the top navigation is in fact an unordered list. This is marked up with code similar to the following (I’ve just removed most of the classes to make it easier to read):

<ul class="menu">
	<li><a href="http://www.bloggingtips.com/" title="Blogging Tips">Home</a></li>
	<li><a href="http://www.bloggingtips.com/forums/">Forums</a></li>
	<li><a href="http://www.bloggingtips.com/forums/local_links.php">Directory</a></li>
	<li><a href="http://www.bloggingtips.com/themes/">Themes</a></li>
	<li><a href="http://www.bloggingtips.com/blogging-resources/">Resources</a></li>
	<li><a href="http://www.bloggingtips.com/money-makers/">Money Makers</a></li>
	<li><a href="http://www.bloggingtips.com/newsletter/">Newsletter</a></li>
	<li><a href="http://www.bloggingtips.com/advertise/">Advertise</a></li>
	<li><a href="http://www.bloggingtips.com/about/">About</a></li>
</ul>

As you can see, before the styling is applied, the menu is just an unordered list. If you turn the CSS off in your browser you will get a standard bullet point list.

Ordered Lists

When you have a specific order for a list then you should use an ordered list. This is fairly similar in mark up to an unordered list, except the opening and closing tag are different. To create a numbered list we use

<ol>
<li>First List Item</li>
<li>Second list item</li>
<li>Third list item</li>
</ol>

Which would give us an output of

1. First List Item
2. Second list item
3. Third list item

To change the ordering from numbers to letters or other sequential ordering we use CSS, which I’ll cover next week.

There is one attribute that goes into the list item, which allows you to change the order value of that item. This also causes all later list items to follow on sequentially from that value i.e. it has a knock on effect. For example, if you wanted to omit the number 2 from your list, then you can use the attribute ‘value’ to do this e.g.

<ol>
<li>First List Item</li>
<li value="3">Second list item but with an order number of 3</li>
<li>Third list item, now with an order number of 4</li>
</ol>

And this would give us:

1. First List Item
3. Second list item but with an order number of 3
4. Third list item, now with an order number of 4

I’m sure at this point, someone will point out that the value attribute is in fact deprecated for XHTML 1.0 and HTML 4.01. The W3C realised this was a mistake at some point, as this is in the XHTML 2.0 specification, and on that basis I still continue to use the value attribute, as it’s very useful!

Definition Lists

The least used, and often not even understood list is a definition list. Personally I think that’s a shame as a definition list has a lot more use than people realise, and to create a better structured site, it certainly has its place. A definition list is just that, a list of titles and descriptions. The basic usage of this is:

<dl>
<dt>Title of something to Define</dt>
<dd>A description or information that defines the title</dd>
<dt>Title of something else to Define</dt>
<dd>A description or information that defines this title</dd>
</dl>

This would give us the output of

Title of something to Define

A description or information that defines the title

Title of something else to Define

A description or information that defines this title

However, definition lists can be used for so much more than a simple title and description list. There are many uses for it – a list of FAQs is probably the simplest of examples; menu items – the section header in the definition title, and then inside the definition description is an unordered list with all the items for that section; a dictionary reference with the word as the definition title and then several definition descriptions depending on how many there were. There are plenty of other uses for a definition list. I always use them when explaining CSS properties.

Conclusion

When you intend to have a list of information, regardless how it’s going to look, then you should usually be using a list of some description. Just make sure you try and pick the right one! Next week I’ll explain how we can style these lists and this will open up the potential that lists really have in your design.

Written by Sarah from Stuff By Sarah
Posted on December 18th, 2008 and filed under Design & Coding
Do not forget to subscribe to our RSS feed for updates

12