Text and meaning

Lists

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

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

Take this course offline

Get every free book, course edition, and software download.

Get the download library →