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.
Articles & Tutorials by Scratchmedia, web designers, London UK
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.
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.
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
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>
<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>
<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.
Do you love our approach to crafting simple & effective web sites that just work for people?
To make your web project a success, contact Scratchmedia for Great Web Design - guaranteed!
Search this site
On “Save the Pixel”
Sign up for my Newsletter!
Sign up for my regular newsletter to keep updated on everything I'm doing and thinking about in web design.
Send to a friend now&hellip
-
Floor 3
111 Buckingham Palace RoadLondonSW1W 0WQUK - Phone
- +44 (0)207 1600 989
<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>