Lists

Lists

We love lists! Grocery lists, to-do lists, top-10 lists. HTML has three kinds.

Unordered list: <ul>

A bullet-point list. "Unordered" = the order doesn't matter.

<ul>
  <li>Apples</li>
  <li>Bananas</li>
  <li>Cherries</li>
</ul>

Ordered list: <ol>

A numbered list. "Ordered" = the order matters.

<ol>
  <li>Wake up</li>
  <li>Brush teeth</li>
  <li>Eat breakfast</li>
</ol>

List items: <li>

<li> is one item, and it always lives inside a list.

Start and reverse

• start="3": begin counting from 3 instead of 1.
• reversed: count backwards.

<ol start="3">
  <li>Three</li>
  <li>Four</li>
</ol>

Description list: <dl>

A list of terms and their descriptions. Like a dictionary!

• <dl>: the whole description list
• <dt>: the term being described
• <dd>: the description

<dl>
  <dt>HTML</dt>
  <dd>The skeleton of web pages.</dd>
  <dt>CSS</dt>
  <dd>The paint of web pages.</dd>
</dl>

Menu: <menu>

<menu> is like <ul>, but for a group of commands or actions (like a toolbar).

<menu>
  <li><button>Copy</button></li>
  <li><button>Paste</button></li>
</menu>

Nesting lists

You can put a list inside a list item to make sub-lists!

<ul>
  <li>Fruit
    <ul>
      <li>Apples</li>
      <li>Oranges</li>
    </ul>
  </li>
  <li>Vegetables</li>
</ul>

TL;DR

• <ul> = bullet list, <ol> = numbered list.
• <li> = one item in a list.
• <dl> = description list with <dt> (term) and <dd> (description).
• <menu> = a list of actions.
• Lists can be nested inside each other.