← HTML tutorial

HTML

Lists

Use <ul> for an unordered (bulleted) list, or <ol> for an ordered (numbered) list. Either way, each item goes inside its own <li> tag.

Example 1: unordered, order doesn't matter

<h3>Shopping list</h3>
<ul>
  <li>Rice</li>
  <li>Tomatoes</li>
  <li>Pepper</li>
</ul>

Use <ul> whenever the sequence of items doesn't actually matter, a shopping list reads the same regardless of which order the items are written in.

Example 2: ordered, sequence matters

<h3>Steps to make jollof rice</h3>
<ol>
  <li>Blend the pepper and tomatoes</li>
  <li>Fry the base</li>
  <li>Add rice and stock, simmer</li>
</ol>

Use <ol> whenever the sequence genuinely matters, here, swapping steps 1 and 3 would actually break the recipe. That's the whole test for choosing between the two: does the order carry meaning?

Try it yourself
Ready to go further?

These free tutorials are a preview, our Frontend Development cohort covers it in depth, with a real project and a cohort alongside you. Active

Enroll in Frontend Development
Don't miss out

Ready to build something real?

Create a free account to enroll in a track, and get notified the moment a cohort opens.

Create free account