Lesson 7 of 12

HTML Lists

Lists are everywhere on the web: ingredients, steps in a tutorial, features of a product, links in a menu. HTML lists have dedicated elements, and using them properly gives you neat formatting for free and tells assistive technology how many items there are. This lesson follows HTML Images and leads into tables, the other way of organising information.

Unordered lists

Use an unordered list, <ul>, when the order of items does not matter – for example, things to pack for a trip. Each item goes in a <li> (list item) element. Browsers show bullet points by default.

Ordered lists

Use an ordered list, <ol>, when sequence matters – steps in a recipe, directions, or a top-ten ranking. Browsers number the items automatically, so if you add or remove a step, the numbers update without any work from you.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Lists</title>
</head>
<body>
  <h2>Packing list for Kodaikanal</h2>
  <ul>
    <li>Warm jacket</li>
    <li>Umbrella</li>
    <li>Comfortable walking shoes</li>
  </ul>

  <h2>How to make filter coffee</h2>
  <ol>
    <li>Add coffee powder to the top chamber of the filter.</li>
    <li>Pour boiling water over it and close the lid.</li>
    <li>Wait 15 minutes for the decoction to collect.</li>
    <li>Mix the decoction with hot milk and sugar.</li>
  </ol>
</body>
</html>

Screen readers announce HTML lists along with the number of items, such as “list, 4 items”. That helps listeners know what to expect – a benefit you lose if you fake a list with line breaks and dashes.

Useful ordered list attributes

AttributeExampleEffect
start<ol start="5">Begins numbering at 5, useful when a list continues after a break.
reversed<ol reversed>Counts down, as in a countdown or “top 5” list.
type<ol type="a">Uses letters or Roman numerals (1, a, A, i, I). Use it when the numbering style is part of the meaning, e.g. legal clauses.
value (on li)<li value="10">Sets the number of one item; following items continue from it.

For purely visual choices, such as custom bullet shapes or removing bullets, use the CSS list-style property rather than HTML attributes. Keep the HTML about meaning.

Nested lists

A list item can contain another complete list, creating sub-points. The nested list must go inside the <li>, after its text – not directly inside the <ul> or <ol>, which may only contain <li> elements (and script-supporting elements).

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Nested lists</title>
</head>
<body>
  <h2>South Indian states and their capitals</h2>
  <ul>
    <li>Tamil Nadu
      <ul>
        <li>Capital: Chennai</li>
      </ul>
    </li>
    <li>Karnataka
      <ul>
        <li>Capital: Bengaluru</li>
      </ul>
    </li>
  </ul>

  <h2>Launch countdown</h2>
  <ol reversed>
    <li>Final checks</li>
    <li>Engines on</li>
    <li>Lift-off</li>
  </ol>
</body>
</html>

Watch out: A frequent mistake is closing the <li> before the nested list starts, e.g. <li>Tamil Nadu</li><ul>…</ul>. That puts the inner list directly inside the outer one, which is invalid. Keep the inner list inside its parent item.

Description lists

A description list, <dl>, groups terms with their descriptions – a glossary, a list of FAQs, or product details such as “Weight: 2 kg”. Each term goes in <dt> and each description in <dd>. One term can have several descriptions, and several terms can share one description.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Description list</title>
</head>
<body>
  <h2>Web words</h2>
  <dl>
    <dt>HTML</dt>
    <dd>The language that describes the structure of web pages.</dd>

    <dt>CSS</dt>
    <dd>The language that controls how pages look.</dd>

    <dt>Browser</dt>
    <dd>An app that downloads and displays web pages.</dd>
    <dd>Examples include Chrome, Firefox, Safari and Edge.</dd>
  </dl>
</body>
</html>

If you need to style each term-and-description pair as a group, for example as a card, you may wrap each <dt>/<dd> group in a <div> inside the <dl>. This is allowed by the HTML standard.

Choosing the right list

When you are unsure which list to use, ask a simple question about your content:

  • Would changing the order change the meaning? If yes, use <ol>. If no, use <ul>.
  • Does every item have a label and a value? Use <dl>.
  • Is it really just one sentence with commas? Then keep it as a sentence. “We serve idli, dosa and pongal” does not need a list.
  • Does each item have several properties you want to compare? That is tabular data – use a table.

HTML lists for navigation menus

Site navigation is, in meaning, a list of links, so it is normally written as a <ul> inside a <nav> element. CSS then removes the bullets and lines the links up in a row. The list structure means screen reader users hear how many links are in the menu.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Navigation list</title>
  <style>
    .menu { list-style: none; display: flex; gap: 1rem; padding: 0; font-family: sans-serif; }
    .menu a { text-decoration: none; color: #0b5394; }
    .menu a:hover, .menu a:focus-visible { text-decoration: underline; }
  </style>
</head>
<body>
  <nav aria-label="Main">
    <ul class="menu">
      <li><a href="#home">Home</a></li>
      <li><a href="#tours">Tours</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
</body>
</html>

Tip: The display: flex line puts the items side by side. You will learn exactly how it works in CSS Flexbox, and you will meet <nav> properly in HTML Semantic Elements. Lists are also a natural fit for JavaScript: see JavaScript Arrays for building them from data.

When your information has rows and columns rather than a single sequence, a list is no longer enough. That is where HTML Tables come in.

Further reading

Key takeaways

  • <ul> is for items where order does not matter; <ol> is for sequences and rankings.
  • Every item goes in an <li>; lists may contain only <li> elements directly.
  • start, reversed and type adjust ordered list numbering; use CSS list-style for purely visual changes.
  • Nest a list inside an <li>, never directly inside another list.
  • <dl>, <dt> and <dd> pair terms with descriptions; menus are lists of links inside <nav>.

Quick quiz

Check what you learned – pick an answer.

1. Which list is best for the steps of a recipe?

2. Where should a nested list be placed?

3. Which elements make up a description list?

Practice exercise

Create a "Top 3 beaches in Pondicherry" list that counts down from 3 to 1, and under it an unordered list of things to carry, where "Snacks" has a nested list with two items.

Show a hint

Use <ol reversed> for the countdown, and put the nested <ul> inside the "Snacks" <li>.

Show the solution
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Pondicherry beaches</title>
</head>
<body>
  <h2>Top 3 beaches in Pondicherry</h2>
  <ol reversed>
    <li>Serenity Beach</li>
    <li>Paradise Beach</li>
    <li>Promenade Beach</li>
  </ol>

  <h2>Things to carry</h2>
  <ul>
    <li>Sunscreen</li>
    <li>Water bottle</li>
    <li>Snacks
      <ul>
        <li>Banana chips</li>
        <li>Murukku</li>
      </ul>
    </li>
  </ul>
</body>
</html>

Progress is saved in this browser only.