HTML Lists
Lists can be a vital part of a semantic layout of your web pages. Lists add some meaning to the text provided, for example they are ideal for menus. These snippets show a variety of ways to display lists.
There are basically 3 types of list:
- Unordered lists (
<ul>) - Ordered lists (
<ol>) - Definition lists (
<dl>)
Unordered list
Does exactly what it says on the tin. This is one of the best ways to display menus. If you view the source of this site then you will see all menus are unordered lists. You can style them in a number of ways. See the related links for more information on that.
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
This displays:
- List item 1
- List item 2
- List item 3
Ordered list
When you list has some logic, use this. It displays a numbering beside the item and again can be styled with CSS to display numbers, letters or roman numerals for example.
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
This displays:
- List item 1
- List item 2
- List item 3
Definition list
This can be used when you have a list that requires a bit more information - a description or definition. As with the other lists it can be style to suit. Within the list there is definition title followed by definition description.
<dl>
<dt>Title item 1</dt>
<dd>Description for menu item 1</dd>
<dt>Title item 2</dt>
<dd>Description for menu item 2</dd>
<dt>Title item 3</dt>
<dd>Description for menu item 3</dd>
</dl>
This displays:
- Title item 1
- Description for menu item 1
- Title item 2
- Description for menu item 2
- Title item 3
- Description for menu item 3
If you are validating your HTML to a strict document type or to any flavor of XHTML you must close all tags, <ul><li></li></ul> and they should be lowercase. More examples of styling list elements are listed below. Have fun....
Share this page
