CONTENT

Lists

Group related items with ordered and unordered lists.

After this lessonChoose ul or ol based on whether sequence matters.

How it works

Use an unordered list when item order is not meaningful and an ordered list when sequence or priority matters. Each list item belongs in an li element.

Lists are easier to scan than paragraphs when presenting steps, requirements or checklists.

REAL WORK

Document startup steps, inspection points or the sequence of a simple standard operating procedure.

SYNTAX

The pattern

<ul>
  <li>Safety check</li>
  <li>Quality check</li>
</ul>

Example

<ol>
  <li>Load the file</li>
  <li>Choose the key</li>
  <li>Run comparison</li>
</ol>

TRY IT

Edit and preview

Change the HTML on the left. The sandboxed preview updates on the right.

<ol>
  <li>Load the file</li>
  <li>Choose the key</li>
  <li>Run comparison</li>
</ol>

QUICK CHECK

Which list is best for numbered steps?

Progress is stored only in this browser. No account required.