Lists are one of the most neglected HTML elements—people often don’t use them when they should. There are many situations when people simply use extra carriage returns (extra lines, the “enter” key, <br> tags) to make a new line for each item in the set of information they are creating. At other times, they use tables in order to get the numbers they type manually to line up well with their other content. For example, a collection of links is a perfect example of a situation when a list should be used instead of other methods of formatting and ordering the content.

Usability and Code Degradation

Using lists is especially important when you consider usability and code degradation—lists help users using screen readers to understand your content, and your content will make more sense to browsers that don’t support CSS.

You Can Do Cool Stuff with Lists

One of the most compelling reasons for using lists is that it provides a semantically correct way to add “hooks” for CSS manipulation—it gives you more HTML tags that you can use to format the presentation of your site. Some of the most advanced menu systems are built using lists.

What Types of Lists Can I Make?

There are two kinds of lists: ordered lists (1 2 3, a b c) and unordered lists (bullets, squares, diamonds, etc.). Changing the style of the lists to letters instead of numbers or diamonds instead of bullets will be covered in a future CSS tutorial.

Ordered Lists

The code for an ordered list is very simple. You start with a tag that tells the web browser you are making an ordered list, <ol>. Then you insert list items in the order you’d like them to appear, sandwiched between list item tags, <li>list item</li>. Finally, you close the list with a closing tag, </ol>. Here’s what a full list looks like:

And here’s what it looks like on a web page:

1. List item 1
2. List item 2
3. List item 3

Unordered Lists

The code for an unordered list is almost identical to ordered lists. You start with the unordered list tag, <ul>. Then you insert your list items sandwiched between list item tags, <li>list item</li>. Close the list with a closing tag, </ul>. As you can see, it’s very easy to switch between ordered and unordered lists—you simply change the opening and closing list tags. Here’s what the list looks like:

And here’s what it looks like on a web page:

• List item 1
• List item 2
• List item 3

Just remember, if you are creating content that you would number or put in a bulleted list if you were using a word processor or writing on paper, that content is a very good candidate for ordered or unordered lists.