Lesson 9: Lists

Lists are used everywhere in web design. We use them for navigation menus, dropdown choices, checklist items, and step-by-step instructions.

HTML has three types of lists: ordered lists (<ol>), unordered lists (<ul>), and description lists (<dl>). We put list items (<li>) inside ordered and unordered lists.

By default, ordered and unordered lists display with numbers or bullet points. But even if you want to hide the bullets (like in a navigation menu), using list tags is still the best way to group your items.

Unordered lists#

The <ul> element wraps unordered lists. Its only allowed children are <li> elements. By default, each item gets a bullet point.

Ordered lists#

The <ol> element wraps ordered lists where the order of items matters. The browser numbers these items automatically.

Ordered lists support attributes like type, reversed, and start. Use type to switch between numbers, Roman numerals, or letters. The reversed attribute counts down instead of up, and start changes the starting number.

List items#

The <li> element represents a single list item. It is only valid when placed directly inside a <ul> or <ol> tag.

Always close your list items with </li> to keep your code clean.

Inside ordered lists, you can add a value attribute to an <li> tag to change its number. The items after it will continue counting up from that new number.

List items can contain text, images, headings, or even other lists.

<ul>
  <li>
    <img src="svg/hal.svg" alt="hal" />
    <p>HAL is an intelligent computer from a space movie.</p>
  </li>
  <li>
    <img src="images/eve2.png" alt="Eve" />
    <p>EVE is a robot designed to search for plants on other planets.</p>
  </li>
</ul>

Sometimes when we design websites, we use CSS styles to hide the default bullet points. When we do this, some screen readers might stop recognizing the list. To fix this, you can add role="list" to the tag so screen readers still know it is a list.

<ul role="list">
  <li>
    <a href="#e">Elements</a>
    <ul>
      <li>
        <a href="#nr">Standard elements</a>
      </li>
    </ul>
  </li>
</ul>

A nested list must be placed inside an <li> tag, never directly inside a parent <ol> or <ul> tag.

Description lists#

The <dl> element wraps description lists. Instead of standard list items, it wraps terms (<dt>) and descriptions (<dd>) as associated pairs.

Description lists are perfect for glossaries, dictionaries, or lists of names and details.

<dl>
  <dt>HAL 9000</dt>
  <dd>An intelligent computer with a glowing red eye.</dd>
</dl>

You can have multiple terms map to a single description, or one term map to multiple descriptions. You can also wrap term-description groups inside a <div> container to make CSS styling easier.

Adapted from Learn HTML © Google and contributors, licensed under CC BY 4.0 (prose) and Apache 2.0 (code samples).