BeingXpert Learn & Build Future

10. HTML Lists

What you will learn

  • Unordered (bulleted) lists
  • Ordered (numbered) lists
  • Description lists
  • Nested lists

Unordered lists

Use <ul> when the order does not matter. Each item goes in an <li> (list item).

Example

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

Output

  • Apples
  • Bananas
  • Cherries

Ordered lists

Use <ol> when the order matters, such as steps in a recipe.

Example

<ol>
  <li>Open the editor</li>
  <li>Write the code</li>
  <li>Save the file</li>
</ol>

Output

  1. Open the editor
  2. Write the code
  3. Save the file

Changing the numbering

  • start="5" begins counting at 5.
  • reversed counts down.
  • type="A" uses letters (also a, I, i).

Example

<ol start="5" type="A">
  <li>Fifth item, shown as E</li>
  <li>Next item, shown as F</li>
</ol>

Output

  1. Fifth item, shown as E
  2. Next item, shown as F

Description lists

A description list pairs terms with their descriptions. Use <dl> for the list, <dt> for the term, and <dd> for the description.

Example

<dl>
  <dt>HTML</dt>
  <dd>The structure of a web page</dd>
  <dt>CSS</dt>
  <dd>The look of a web page</dd>
</dl>

Output

HTML
The structure of a web page
CSS
The look of a web page

Nested lists

Put a new list inside an <li>, not directly inside the <ul>.

Example

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

Output

  • Fruit
    • Apples
    • Pears
  • Vegetables

Website menus are usually built as lists of links. You will style them with CSS later to look like navigation bars.

Common mistakes

  • Putting text directly inside <ul> or <ol> without an <li>.
  • Placing a nested list outside the parent <li>.
  • Using <ul> when the order matters.
  • Typing “1.” and “-” by hand instead of using list elements.

Exercise

Write a numbered list with three steps: Boil water, Add tea, Wait three minutes.

Show solution 
<ol>
  <li>Boil water</li>
  <li>Add tea</li>
  <li>Wait three minutes</li>
</ol>

Knowledge check

1. Which element makes a bulleted list?

<ul>

2. Which element holds one list item?

<li>

3. Where do you place a nested list?

Inside an <li> of the parent list.

Summary

  • <ul> is for bullets, <ol> for numbers, <dl> for terms and descriptions.
  • Every item in <ul> and <ol> uses <li>.
  • Nest lists inside list items.
Scroll to Top