HTML Lists Table
| Element | Use | Field note |
|---|---|---|
<ul> | Unordered list - order irrelevant | Shopping lists, feature bullets; CSS list-style changes the marker |
<ol> | Ordered list - sequence matters | Steps and rankings; start attribute resumes numbering |
<ol type="a"> | Marker style | a/A/i/I/1 - CSS list-style-type is the modern way |
<li> | List item - the only valid child | value attribute jumps ol numbering (lists only) |
<dl> | Description list - term/definition pairs | Glossaries, metadata pairs, FAQs before details existed |
<dt> / <dd> | Term and its description | Multiple dd per dt is legal - aliases and senses |
nested <ul> | Lists inside lists | Nested list goes inside an li - never a direct child of ul |
list-style: none | Marker removal | The menu pattern - keep the semantics, lose the bullets |
Lists are the most-used semantic HTML after headings - and the easiest to get subtly wrong. The table below covers the family: the three list containers, the item and description elements, and the placement rule for nesting that validity checkers catch every day.
Bottom line: ul means order is irrelevant, ol means sequence carries meaning, and dl pairs terms with descriptions - glossaries, metadata, FAQs. Choosing by meaning (not by which bullet looks better) is what lets screen readers announce "list, 5 items" and let CSS restyle everything later without touching the markup.
The honest part: the single most common list error is placement. A nested list is legal only inside an li - a ul directly inside a ul (or between two li elements) breaks validity and confuses the tree screen readers walk. The visual result looks identical, which is exactly why the mistake survives until an audit or a validator finds it.
How to use
- Pick the container by meaning: ul for unordered sets, ol for sequences, dl for term-description pairs.
- Nest by the rule: a sub-list goes inside the li of the item it belongs to, never as a direct child of the container.
- Restyle with CSS (list-style) rather than switching containers - semantics survive restyling; the reverse is not true.
Frequently asked questions
When should I use ol instead of ul?
When the order itself carries information: steps in instructions, rankings, priorities, a sequence of events. Screen readers announce the position in an ol ("item 3 of 7"), which is meaningful for instructions and noise for a set of ingredients. If reordering the items would not change the meaning, it is a ul - the test is semantic, not visual, and CSS can make either one look however the design needs.
What is a dl list and when does it beat ul or ol?
A description list pairs terms with their descriptions: dt names the term, dd gives the description, and multiple dd elements per dt are legal (synonyms, alternate spellings). It is the native markup for glossaries, metadata pairs (label: value), and FAQ-style content where each question is a term. It reads well for screen readers because the pairing is structural - a ul of "Question... Answer..." paragraphs has no machine-readable link between the two.
Where exactly does a nested list go?
Inside the li of the item it belongs to: the parent li contains its own text, then the sub-list as its last child. Placing a ul directly inside a ul - or as a sibling between two li elements - is invalid HTML; browsers will render it, but the list structure screen readers navigate is corrupted, and the nesting level they announce is wrong. The visual indentation looks the same either way, which is why this error is so common and so invisible.
How do I remove the bullets but keep the list?
list-style: none on the ul (plus the standard padding reset) keeps the element a real list - semantic structure, screen reader announcements - while looking like a custom menu. This is the standard navigation pattern: nav menus are semantically lists of links even when no bullet or number shows. The alternative - div soup with dash characters typed in - loses the list announcements and the item counting for zero benefit.