HTML · The document layer
When should you use ul, ol and dl?
Short answer
Use ul for unordered items, ol when order matters, and dl for term and description pairs. Lists give screen readers a count of items and make relationships explicit.
Lists are semantic, not just visual. A screen reader announces that it has entered a list and how many items it contains, which gives users a mental model of the content.
<ul>
<li>Semantic HTML</li>
<li>Accessible forms</li>
</ul>
<ol>
<li>Open the settings page</li>
<li>Choose a plan</li>
<li>Confirm payment</li>
</ol>
<dl>
<dt>HTML</dt>
<dd>The markup language for web content.</dd>
</dl>Choosing the right list
- ul when the items have no meaningful order
- ol when sequence or rank matters, such as steps or rankings
- dl when pairing terms with definitions or labels with values
- Only li elements should be direct children of ul and ol
- Use CSS for bullets, numbering and layout, not fake list markup
Navigation menus are commonly marked up as lists of links. That is valid and useful because the list communicates the set of destinations, while the nav element communicates the region.
Follow-ups you should expect
Interviewers use these to check whether the first answer was understanding or memorisation.
- 1When is an ordered list more appropriate than an unordered one?
- 2What is a description list used for?
- 3Should navigation always be a list?
- 4Can you style list markers with CSS?
Say it in the interview
I use ul when order does not matter, ol when it does, and dl for term and description pairs. Lists are useful semantically because screen readers announce the list and the number of items, which helps users understand the content. I keep li as the direct child of ul or ol, and I use CSS for the visual presentation rather than faking bullets with divs.
Use this as a model, not a script. Saying it in your own words is what makes it survive follow-up pressure.
Related questions
Reading is step one
Now say it out loud.
Understanding an answer and delivering it under pressure are different skills. Rehearse this topic in a live HTML mock interview and get scored feedback on depth, clarity and confidence.