HTML Lists: unordered, ordered and definition lists

Web browsers will show three different types of lists: ordered, unordered and definition lists.

This tutorial explains to use each type, and how to make them in HTML.

New eBook - Web page production with xHTML and CSS #1

Experience the thought process of a professional web producer as he guides you through the web page production process, from photoshop design to working HTML template.

The book tells you how to approach web production, beginning with semantic HTML, guiding you through how to slice up a photoshop document, and finally how to use CSS for presentation.

Buy now for only £9.00 GBP ...

New eBook - Guide to Semantic HTML

Ben Hunt adds another great eBook to the collection with his "Guide to Semantic HTML". The book gives you advice and tips on how, and why to use semantic HTML.

Included is a comprehensive list of HTML tags, each with their semantically appropriate uses, along with a worked example taking you through the process of how to build a website using semantic HTML.

Buy now for only £5.00 GBP ...

Semantic use of lists

It's good to write HTML code that is semantically correct, which means that the HTML structures and elements you use accurately describes the structure of the information.

Use a list whenever you have a repeated list of items in your content. This will look fine in a regular web browser, and will also help other user agents (like text-to-speech screen readers, other non-graphical browsers and search engine spiders) to interpret the structure of the content on the page accurately.

There are 3 types of lists:

Unordered lists (bulleted lists)
Ordered lists (incrementing numbers or letters instead of bullets)
Definition lists (list term/definition pairs)

Unordered lists <ul>

Unordered lists are simple bulleted lists. Use when there is no particular order to the items, when you won't need to cross-reference an item to other content elsewhere.

Elements

<ul> ... </ul>: Unordered list; paired tag.
<li> ... </li>: List item; paired tag.

Example

<ul>
<li>Item one</li>
<li>Item two</li>
<li>Watch, you can easily nest list items: This item has some sub-items</li>
<ul>
<li>Sub-item one</li>
<li>Sub-item two</li>
<li>Shall we do a 3rd nested list?</li>
<ul>
<li>OK</li>
<li>Your browser should automatically use different bullet styles for each level.</li>
</ul>
</ul>
</ul>

Looks like

Item one
Item two
Watch, you can easily nest list items: This item has some sub-items

Sub-item one
Sub-item two
Shall we do a 3rd nested list?

OK
Your browser should automatically use different bullet styles for each level.

Ordered lists <ol>

Ordered lists are similar to unordered lists, but with a numbering (or lettering) order applied by the browser.

Elements

<ol> ... </ol>: Ordered list; paired tag.
<li> ... </li>: List item; paired tag.

Example

<ol style="list-style-type:decimal;">
<li>Item one</li>
<li>Item two</li>
<li>Watch, you can easily nest list items: This item has some sub-items</li>
<ol style="list-style-type:lower-alpha;">
<li>Sub-item one</li>
<li>Sub-item two</li>
<li>Shall we do a 3rd nested list?</li>
<ol style="list-style-type:lower-roman;">
<li>OK</li>
<li>Your browser should automatically use different bullet styles for each level.</li>
</ol>
</ol>
</ol>

Looks like

Item one
Item two
Watch, you can easily nest list items: This item has some sub-items

Sub-item one
Sub-item two
Shall we do a 3rd nested list?

OK
Your browser should automatically use different bullet styles for each level.

Note that, while I've used the type attribute to set the sort of numbers/characters applied, it is better to do this in CSS than in HTML.

Definition lists

Definition lists are for lists of term/definition pairs.

Elements

<dl> ... </dl>: Definition list; paired tag.
<dt> ... </dt>: Definition term; paired tag.
<dd> ... </dd>: Definition definition; paired tag.

Example

<dl>

<dt> The dl element </dt>
<dd>Paired tags define the start and end of a definition list.</dd>

<dt> The dt element </dt>
<dd>Paired tag that indicates the term being defined.</dd>

<dt> The dd element </dt>
<dd>Paired tag that indicates the definition of the term. Each term should be followed by a definition.</dd>

</dl>

Looks like

The dl element: Paired tags define the start and end of a definition list.
The dt element: Paired tag that indicates the term being defined.
The dd element: Paired tag that indicates the definition of the term. Each term should be followed by a definition.

There are lots of other ways you can structure content of this type (e.g. in a table, or using sub-headings), but if it matches this pattern, it's best to use a definition list, because it clearly indicates the relationships between the terms & definitions to any software looking at your page.