Lists
HTML has three kinds of list: unordered lists for items where order doesn't matter, ordered lists for steps and rankings, and description lists for terms paired with explanations. Lists are also the standard way to mark up navigation menus.
Unordered lists
<ul> contains <li> (list item) elements, shown with bullets by default. The only elements allowed directly inside a <ul> or <ol> are <li> (plus <script> and <template>); everything else goes inside the list items.
Ordered lists
Use <ol> when the sequence matters — instructions, rankings, a timeline. The browser numbers the items for you, so inserting a step never means renumbering by hand.
Ordered list attributes
| Attribute | On | Effect |
|---|---|---|
start | <ol> | The first number |
reversed | <ol> | Count down instead of up |
type | <ol> | 1, a, A, i, I |
value | <li> | Set this item's number; following items continue from it |
Nested lists
To nest a list, put the inner list inside an <li> of the outer list:
<ul> <li>Fruit</li> <ul> <li>Apples</li> </ul> </ul>
The second version puts a <ul> directly inside a <ul>, which is invalid.
Description lists
A description list pairs terms (<dt>) with descriptions (<dd>) — glossaries, FAQs, metadata, product specifications:
A term can have several descriptions and vice versa. Each <dt>/<dd> group may be wrapped in a <div> for styling.
Lists for navigation
A navigation menu is a list of links, so it's conventionally marked up as one — screen readers then announce "list, 4 items", which tells users how many options there are:
CSS removes the bullets (list-style: none) and lays the items out horizontally. The HTML still describes what it is: a list of links.
Styling bullets and numbers
Prefer CSS for list appearance; the type attribute on <ol> is only appropriate when the numbering style is part of the meaning (like a legal document referring to "clause B").