16 min read
Lists
Unordered, ordered and description lists, nested lists, and why a navigation bar is really a list.
Unordered and Ordered Lists
ul and olHTML
<h3>Why visit us?</h3><ul> <li>Twelve single-estate teas</li> <li>Cakes baked every morning</li> <li>Free Wi-Fi</li></ul> <h3>How to brew the perfect cup</h3><ol> <li>Warm the pot.</li> <li>Add one spoon of tea per cup.</li> <li>Pour on freshly boiled water.</li> <li>Wait three to five minutes.</li></ol>What the browser shows
- <ul> (unordered list) shows bullet points — use it when the order does not matter.
- <ol> (ordered list) shows numbers — use it for steps, rankings and instructions.
- Each item goes inside <li> (list item). Only <li> elements may be directly inside <ul> or <ol>.
Useful List Attributes
An ordered list can start at another number (<ol start="5">), count backwards (reversed), or use letters or Roman numerals (type="A", type="i").
Nested Lists
A list inside a listHTML
<ul> <li>Teas <ul> <li>Nuwara Eliya</li> <li>Uva</li> </ul> </li> <li>Cakes</li></ul>What the browser shows
Description Lists
Terms and descriptionsHTML
<dl> <dt>Kokis</dt> <dd>A crispy, flower-shaped sweet made from rice flour and coconut milk.</dd> <dt>Love cake</dt> <dd>A rich semolina and cashew cake with spices.</dd></dl>What the browser shows
<dl> holds pairs of <dt> (the term) and <dd> (its description) — ideal for a glossary or an FAQ.
More lessons in HTML · Next: Images · Previous: Headings, Paragraphs and Text Formatting