LESSON 11

Lists

Learning objective: Present items using ordered and unordered lists.

Understand

Lists group related items so they are easy to scan.

Use <ul> for an unordered (bulleted) list and <ol> for an ordered (numbered) list. Each item goes in an <li>. Lists can be nested to show sub-items.

Analogy: A <ul> is a shopping list where order does not matter; an <ol> is a recipe where the steps must be in order.

See It in Action

An unordered and an ordered list:

<ul>
  <li>HTML</li>
  <li>CSS</li>
</ul>
<ol>
  <li>Plan</li>
  <li>Build</li>
</ol>
How it works: <ul> shows bullets and <ol> shows numbers; each <li> is a single item in the list.

Try It Yourself

  1. Make a <ul> of three things you want to learn.
  2. Make an <ol> of three steps to reach a goal.
  3. Nest a <ul> inside one of the <li> items.

Quick Quiz

Which list is numbered by default?

Challenge

Create a page section with one ordered and one unordered list.

Success condition: Your page shows a working numbered list and a bulleted list.