📋 HTML Foundations

Lists

⏱ 1 hr2 topicsLive playground
🎯 By the end: You can build bullet and numbered lists, nest them, and choose the right list type for the job — including for navigation menus.

Lists are everywhere on the web: navigation menus, recipe steps, feature bullets, FAQs. HTML gives you three kinds, and picking the right one keeps your markup meaningful.

1Unordered and ordered lists

Both list types are built the same way: a container element holding list items (<li>). Only the container changes.

ListContainerUse when…
Unordered<ul>order does not matter (a shopping list, features). Shows bullets.
Ordered<ol>order matters (steps, rankings). Shows numbers.
<ul>
  <li>Milk</li>
  <li>Bread</li>
</ul>
Only <li> elements belong directly inside a <ul> or <ol> — not loose text or paragraphs.
Build a list
HTML
CSS
Live preview
What's happening: This is an ordered list (<ol>), so the browser numbers the items automatically. Change <ol> to <ul> in the editor and watch the numbers turn into bullets.
Key points
  • Use <ul> for unordered (bulleted) lists and <ol> for ordered (numbered) lists.
  • Both hold <li> (list item) elements.
  • Only <li> belongs directly inside a list — not loose text.

2Nested lists, and lists as menus

A list item can contain another whole list, giving you sub-points:

<ul>
  <li>Fruit
    <ul>
      <li>Apple</li>
      <li>Mango</li>
    </ul>
  </li>
</ul>

Here's something that surprises beginners: almost every website's navigation menu is really an unordered list of links. It is the semantically correct structure — a list of places you can go. You will see this pattern constantly:

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>
There is also a third type — the description list (<dl> with <dt> terms and <dd> definitions) — handy for glossaries and FAQs.
Key points
  • Nest a list by placing a <ul> or <ol> inside an <li>.
  • Navigation menus are correctly built as a <ul> of links inside <nav>.
  • Description lists (<dl>/<dt>/<dd>) suit glossaries and FAQs.

★ Practical: a menu and a recipe

In any playground, create:

  1. An ordered list (<ol>) of 3 steps to make tea.
  2. An unordered list (<ul>) of 3 ingredients.
  3. A nested list — one ingredient with two sub-items under it.
  4. Bonus: a <ul> of links wrapped in a <nav> as a menu.

Ready to test yourself?

Take the short quiz. Score 60% or more to mark this lesson complete.

Start the quiz →

💡 Log in to save your progress and earn the certificate.

← Previous
Headings & Paragraphs
Next →
Links