Lesson · Beginner
HTML lists
Represent unordered sets, ordered sequences, and name-value groups with list structures that communicate relationships.
- Author
- Editorial team
- Reviewer
- Publication review pending
- Review tier
- annual
Choose by whether order changes meaning
Use ol when sequence or rank matters. Use ul when the items form a set but
their order is not essential.
<h2>Make tea</h2>
<ol>
<li>Boil fresh water.</li>
<li>Steep the tea.</li>
<li>Remove the leaves.</li>
</ol>Every direct child of ol or ul is an li. Put a nested list inside the list
item it expands.
Why list markup matters
Assistive technology can announce the number of items and let a reader move through the group. Visual bullets created with arbitrary characters do not provide that relationship.
Exercise
Mark up a packing checklist and a set of turn-by-turn directions. Explain why one can be unordered while the other should be ordered.