Techie BabajiLearn to Code. Build Real Skills.
HTML · Content

Lists

Shopping lists, steps in a recipe, menu links, FAQs — lists are everywhere. HTML has three kinds, each with its own job.

Beginner 5 min Lesson 8 of 22 Runnable examplesFollows the WHATWG HTML Living Standard.
Before you start:HTML Elements and Tags
0/22 in HTML
On this page · 5 min · Beginner

On this page

  1. Learning objectives
  2. Explanation
  3. Syntax
  4. Code example
  5. Step by step
  6. Real-world use
  7. Common mistakes
  8. Best practices
  9. Remember this
  10. Practice exercise
  11. Mini quiz
  12. Related topics
  13. My notes
Reading time
5 min
Difficulty
Beginner
Updated
Oct 28, 2026

Related tutorials

Interview questions

Learning objectives#

  • Create unordered lists with <ul>
  • Create numbered lists with <ol>
  • Nest a list inside another
  • Use description lists for term–definition pairs

Explanation#

<ul> (unordered list) is for items where order does not matter. Each item is an <li>. Browsers show bullets.

<ol> (ordered list) is for steps where order matters. Browsers number them. start="5" begins at 5; reversed counts down; type="A" uses letters.

To nest, put the whole inner <ul> or <ol> inside an <li> — not directly inside the outer list.

<dl> (description list) pairs terms <dt> with descriptions <dd>: glossaries, FAQs, product specifications.

Syntax#

HTML Illustrative
<ul> <li>Item</li> </ul>
<ol> <li>Step</li> </ol>
<dl> <dt>Term</dt> <dd>Description</dd> </dl>

Code example: All three list types#

HTMLAll three list types Runnable
<h3>Groceries</h3>
<ul>
  <li>Rice</li>
  <li>Vegetables
    <ul>
      <li>Onions</li>
      <li>Tomatoes</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>


<h3>Make tea</h3>
<ol>
  <li>Boil water</li>
  <li>Add tea leaves</li>
  <li>Add milk and sugar</li>
</ol>


<h3>Specifications</h3>
<dl>
  <dt>Weight</dt><dd>1.2 kg</dd>
  <dt>Battery</dt><dd>10 hours</dd>
</dl>
Expected output
A bulleted grocery list with a nested sub-list, a numbered list of steps and a list of specifications.
Opens this example in the full playground

Step-by-step explanation#

  1. The grocery list uses <ul> because order does not matter.
  2. The nested <ul> lives inside the “Vegetables” <li>.
  3. The tea steps use <ol> because doing them out of order would ruin the tea.
  4. <dl> pairs each spec name (<dt>) with its value (<dd>).

Real-world use case#

Navigation menus are <ul> lists styled horizontally with CSS. Checkout steps and tutorials use <ol>. Product spec tables and FAQs often use <dl>.

Common mistakes#

Putting text directly inside <ul>

Only <li> may be a direct child of <ul> or <ol>. Wrap every item in <li>.

HTML Illustrative
<!-- ✗ -->
<ul>Rice</ul>
<!-- ✓ -->
<ul><li>Rice</li></ul>
Nesting a list outside an <li>

<ul><li>A</li><ul>…</ul></ul> is invalid. The inner list must be inside an <li>.

Typing numbers by hand

Writing “1.” “2.” in <p> tags means renumbering everything when you add a step. <ol> numbers automatically.

Best practices#

  • Use <ol> when order matters, <ul> when it does not
  • Use CSS list-style to change bullets, not images in the HTML
  • Keep nesting to two levels where possible
  • Use lists for menus — screen readers announce “list, 4 items”

Remember this#

ul = unordered (bullets) • ol = ordered (numbers) • dl = dictionary (term + meaning).

li = list item — the only child a ul/ol may have.

Nested list? It lives inside an li.

Practice exercise#

Your task: Make an ordered list of 3 steps to start a computer, where step 2 has a nested unordered list of two sub-points.

Need a hint?
Put the nested <ul> inside the second <li>, after its text.
Show solution
HTML Runnable
<ol>
  <li>Press the power button</li>
  <li>Log in
    <ul>
      <li>Enter your username</li>
      <li>Enter your password</li>
    </ul>
  </li>
  <li>Open your apps</li>
</ol>
Opens this example in the full playground

Mini quiz#

Lists quizMultiple choice Question 1 of 3

Which list suits the steps of a recipe?

Score so far: 0/0

Want more? Practise all HTML MCQs · HTML interview questions

My notes#

Saved in this browser.

Progress is saved in this browser. Sign in to sync.