Lists are everywhere on the web — navigation menus, feature lists, step-by-step instructions, search results. HTML gives you three kinds, and they are all simple to use.
Unordered lists
An unordered list is a set of items where the order does not matter — like a shopping list. Use <code><ul></code> for the list and <code><li></code> for each item. Browsers show bullet points by default.
Ordered lists
When order matters — steps in a recipe, a ranking, instructions — use an ordered list with <code><ol></code>. Browsers number the items automatically, so you never type the numbers yourself.
- Order does not matter
- Shows bullets
- Menus, features, tags
- Most common list
- Order matters
- Shows numbers
- Steps, rankings, recipes
- Numbered automatically
Nested lists
You can put a list inside a list item to create sub-items — perfect for multi-level menus or outlines. Just place a new <code><ul></code> or <code><ol></code> inside an <code><li></code>.
Description lists
A description list pairs terms with descriptions — useful for glossaries or metadata. Use <code><dl></code> for the list, <code><dt></code> for each term, and <code><dd></code> for its description.
Build a two-level nested menu in the editable box: three top-level items, and give one of them a sub-list of two items. Then add a separate ordered list of three steps.
1. Which list is numbered automatically?
2. What element is a single list item?
3. You have a shopping list where order does not matter. Use…
4. How do you nest a list?
- Use <ul> for unordered (bulleted) lists, <ol> for ordered (numbered).
- Each item is an <li>; the browser handles bullets and numbers.
- Nest a list inside an <li> for sub-items.
- Description lists (<dl>/<dt>/<dd>) pair terms with descriptions.