Lists

Lists group related items and tell the browser whether order matters. Pick the list type that matches your content.

Use an unordered list when the sequence does not matter:

<ul>
  <li>Helmet</li>
  <li>Water bottle</li>
  <li>Repair kit</li>
</ul>

ul means unordered list. Each item is an li element. The browser shows bullets by default. Screen readers announce how many items the list contains, which helps people scan quickly.

Use an ordered list when the steps or ranking must stay in sequence:

<ol>
  <li>Check the tires</li>
  <li>Adjust the seat</li>
  <li>Test the brakes</li>
</ol>

The browser numbers the items automatically. The numbers are helpful visually, but the semantic fact that order matters is even more important for assistive technology.

A description list pairs terms with their definitions:

<dl>
  <dt>Cycle track</dt>
  <dd>A path reserved for bicycles.</dd>

  <dt>Bike lane</dt>
  <dd>A marked part of a road for bicycles.</dd>
</dl>

Use dl for glossaries, metadata pairs, or any term-plus-explanation pattern. Each dt is the term. Each dd is its description.

You can nest a list inside a list item when a step has sub-steps. Keep indentation consistent so the nesting stays readable in your source file.

A common beginner mistake is forgetting to close an li before starting the next one. The browser tries to repair the tree, but the list may render with wrong indentation or broken numbering. View the page source and confirm every <li> has a matching </li>.

On your my-page project, add a “What I am learning” section with a ul of three topics. Reload the page and confirm you see three separate bullets, not one run-on paragraph. List markup does more work than comma-separated text ever will.

If you nest lists, open the page with a screen reader or the accessibility tree in DevTools and confirm each level is announced as its own list.

Quick check

Start quiz

Result

You got of right.

Try again