Text and meaning

Lists

Use unordered, ordered, and description lists to group related items and communicate whether their sequence matters.

6 minute lesson

~~~

Use an unordered list when the order of its items 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.

Use an ordered list when the sequence matters:

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

The browser numbers ordered-list items by default. The numbers are useful, but the semantic fact that order matters is even more important.

Description lists pair terms with descriptions:

<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>

You can nest a list inside a list item. Keep the nesting visible with consistent indentation.

Quick check

Result

You got of right.

Lesson completed