HTML Lists · Unordered, Ordered, Description, and Nested Lists

Before we begin, you need to feel comfortable with the following ideas. If any of these feel unfamiliar, re-read the relevant earlier lesson before continuing.

HTML tags · An HTML tag is a keyword wrapped in angle brackets. Tags normally come in pairs: an opening tag like <p> and a closing tag like </p>. Everything between the two tags is the content that tag controls.

HTML elements · An HTML element is the complete unit of opening tag + content + closing tag:

<p>This is a paragraph element.</p>

Parent and child elements · When one element sits inside another element, the outer one is called the parent and the inner one is called the child. Lists use this relationship constantly: the list container (<ul> or <ol>) is the parent, and each list item (<li>) is a child.

The style attribute · You can add CSS styling directly to any HTML tag using the style attribute, like this:

<p style="color: red;">This text is red.</p>

We will use this technique in a few list examples to change bullet styles.

Why Do Lists Exist?

Think of any real-world situation where you group related items together:

• A shopping list
• The steps to install an app
• A glossary of terms
• A navigation menu on a website
• A table of contents

All of these are lists. Without proper list elements in HTML, you would have to fake a list with paragraphs or line breaks · and that would make your HTML harder to read, harder to style, and harder for screen readers (used by people with visual impairments) to understand.

HTML provides dedicated list elements so that both browsers and assistive technology can correctly identify and present your content.

The Three Types of HTML Lists

HTML supports exactly three list types. Here is a plain-English summary before we dive into the code:

The List Item Tag

All three list types share the same child tag for their items: <li> (which stands for "list item"). Think of <li> as one line in your list.

Analogy: If <ul> or <ol> is a shopping bag, then each <li> is one product inside the bag.

What Is an Unordered List?

An unordered list is a collection of items where the order does not matter. Each item is typically displayed with a small bullet marker beside it. By default, the marker is a solid black circle (•).

Real-world examples:

• A list of features on a product page ("Free shipping • 30-day returns • 24/7 support")
• A set of ingredients in a recipe
• Navigation links in a website header

Basic Syntax

<ul>
  <li>Item one</li>
  <li>Item two</li>
  <li>Item three</li>
</ul>

Let's read this line by line:

• <ul> · Opens the unordered list container. This tells the browser "a bullet list starts here."
• <li>Item one</li> · A single list item. Everything between <li> and </li> is the text that appears beside the bullet.
• The second and third <li> lines follow the same pattern.
• </ul> · Closes the unordered list container. This tells the browser "the bullet list ends here."

Simple Example · A Fruit List

<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Mango</li>
</ul>

Expected output in the browser:

• Apple
• Banana
• Mango

Thinking prompt: What if you swapped Banana and Mango · would the meaning of the list change? No! That is exactly why this is an unordered list. The sequence does not matter.

Choosing a Bullet Marker Style

By default the bullet is a solid disc. You can change the marker shape using the CSS property list-style-type on the <ul> tag. There are four options:

Example 1 · Disc (default)

<ul style="list-style-type: disc;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Expected output:

● Coffee
● Tea
● Milk

Example 2 · Circle

<ul style="list-style-type: circle;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Expected output:

○ Coffee
○ Tea
○ Milk

Example 3 · Square

<ul style="list-style-type: square;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Expected output:

■ Coffee
■ Tea
■ Milk

Example 4 · None (no marker)

<ul style="list-style-type: none;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Expected output:

Coffee
Tea
Milk

Why would you use none? When you want to build a navigation menu from a list but hide the bullets, or when you are creating a custom-styled list where you add your own icons in CSS.

Thinking prompt: What happens if you remove the style attribute entirely? The browser will use disc as the default.

Nested Unordered Lists

You can place one list inside another list item. This creates a sub-list · also called a nested list.

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

Expected output:

● Coffee
● Tea
    ○ Black tea
    ○ Green tea
● Milk

Line-by-line explanation:

• The outer <ul> holds the main list: Coffee, Tea, Milk.
• The <li>Tea item does not have a closing </li> right away. Instead, it opens a second <ul> inside itself.
• That inner <ul> contains "Black tea" and "Green tea" as its own <li> items.
• The inner </ul> closes the sub-list, and then </li> closes the "Tea" list item.

Notice that the browser automatically changes the bullet style for the inner list (from disc to circle) to help show the difference in levels visually.

Important rule: A <li> element can contain anything that a normal block of content can · other lists, images, links, paragraphs, etc.

Horizontal List · Building a Navigation Menu

One very practical use of <ul> is building a website navigation bar (the row of links at the top of a website). By default, list items stack vertically. But with a little CSS, you can make them float side by side horizontally.

<!DOCTYPE html>
<html>
<head>
<style>
  ul {
    list-style-type: none;   /* Remove bullets */
    margin: 0;               /* Remove default spacing */
    padding: 0;              /* Remove default indent */
    overflow: hidden;        /* Contain the floated items */
    background-color: #333;  /* Dark background */
  }

  li {
    float: left;             /* Put each item side-by-side */
  }

  li a {
    display: block;          /* Make the whole box clickable */
    color: white;            /* White text */
    text-align: center;
    padding: 16px;
    text-decoration: none;   /* Remove underline */
  }

  li a:hover {
    background-color: #111;  /* Darken on hover */
  }
</style>
</head>
<body>

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>

Expected visual output: A dark horizontal bar reading: Home News Contact About Hovering over any item makes it slightly darker.

CSS explanation (each property explained):

• list-style-type: none · Removes the bullet points so the menu looks clean.
• margin: 0; padding: 0 · Removes the default browser indent/gap that appears around lists.
• overflow: hidden · Ensures the dark background stretches to contain all the floated items.
• float: left · Forces each <li> to sit to the right of the previous one instead of below it.
• display: block · Makes the link fill the entire <li> box, so clicking anywhere in the box works.
• padding: 16px · Adds comfortable click space around each link label.
• text-decoration: none · Removes the default blue underline from links.

Real-world connection: Nearly every website navigation bar you have ever seen is built exactly this way · a <ul> with CSS making it horizontal.

What Is an Ordered List?

An ordered list is a list where the sequence matters. Each item is automatically numbered by the browser. You do not type the numbers yourself · HTML does it for you.

Real-world examples:

• Steps in a tutorial ("Step 1: Install Python, Step 2: Open the terminal…")
• A ranked top-10 list
• Cooking instructions in a recipe
• Legal terms with clause numbers

Basic Syntax

<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

Expected output:

1. First item
2. Second item
3. Third item

The browser automatically adds "1.", "2.", "3." · you never type those numbers.

Thinking prompt: What if you deleted the second <li>? The list would still number correctly: 1, 2 · not 1, 3. HTML always renumbers automatically.

The type Attribute · Changing the Numbering Style

By default, ordered lists use Arabic numerals (1, 2, 3…). The type attribute on <ol> lets you change this:

Example 1 · Default Numbers

<ol type="1">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Expected output:

1. Coffee
2. Tea
3. Milk

Example 2 · Uppercase Letters

<ol type="A">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Expected output:

A. Coffee
B. Tea
C. Milk

Example 3 · Lowercase Letters

<ol type="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Expected output:

a. Coffee
b. Tea
c. Milk

Example 4 · Uppercase Roman Numerals

<ol type="I">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Expected output:

I.   Coffee
II.  Tea
III. Milk

Example 5 · Lowercase Roman Numerals

<ol type="i">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Expected output:

i.   Coffee
ii.  Tea
iii. Milk

Real-world use case: Legal documents, academic papers, and formal outlines often use Roman numerals for section headings. Homework assignments sometimes use lowercase letters (a., b., c.) for sub-questions.

The start Attribute · Starting From a Custom Number

By default, an ordered list starts counting from 1. Sometimes you need to start from a different number · for example, when continuing a list that was split across two separate <ol> blocks on the page.

The start attribute lets you set the starting number:

<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Expected output:

50. Coffee
51. Tea
52. Milk

Thinking prompt: What would happen if you wrote start="5" with type="A"? The list would start at the 5th letter: E, F, G…

Nested Ordered Lists

Just like unordered lists, ordered lists can be nested:

<ol>
  <li>Coffee</li>
  <li>Tea
    <ol>
      <li>Black tea</li>
      <li>Green tea</li>
    </ol>
  </li>
  <li>Milk</li>
</ol>

Expected output:

1. Coffee
2. Tea
    1. Black tea
    2. Green tea
3. Milk

The inner ordered list restarts numbering from 1 automatically.

What Is a Description List?

A description list is a specialised list designed for term-and-definition pairs · like a dictionary or a glossary. Instead of bullet points or numbers, each entry has two parts: a term and its description (or definition).

Real-world examples:

• A glossary of technical terms on a documentation page
• A product specification sheet ("Weight: 1.2kg, Battery: 4000mAh")
• An FAQ section ("Question: ... Answer: ...")
• A recipe's metadata ("Servings: 4, Cook time: 30 min")

The Three Tags Used in Description Lists

Basic Syntax

<dl>
  <dt>Term 1</dt>
  <dd>Definition of term 1</dd>
  <dt>Term 2</dt>
  <dd>Definition of term 2</dd>
</dl>

Line-by-line explanation:

• <dl> · Opens the description list container.
• <dt>Term 1</dt> · Defines the first term (displayed left-aligned, not indented).
• <dd>Definition of term 1</dd> · Provides the description for that term (displayed indented below the term).
• The pattern repeats for each term-description pair.
• </dl> · Closes the description list.

Simple Example · Drinks Glossary

<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>

  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>

Expected output:

Coffee
    - black hot drink
Milk
    - white cold drink

Notice that <dd> automatically indents its content. The browser does this by default to visually connect the description to its term.

Practical Example · Programming Glossary

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language — used to structure web content.</dd>

  <dt>CSS</dt>
  <dd>Cascading Style Sheets — used to style and layout web pages.</dd>

  <dt>JavaScript</dt>
  <dd>A programming language that makes web pages interactive.</dd>
</dl>

Expected output:

HTML
    HyperText Markup Language — used to structure web content.
CSS
    Cascading Style Sheets — used to style and layout web pages.
JavaScript
    A programming language that makes web pages interactive.

Thinking prompt: Could you use a <ul> or <ol> for this same content? Technically yes, but <dl> is semantically better · it clearly communicates to browsers and screen readers that these are paired term-definition relationships, not just a simple list of items.

You can nest different list types inside each other. For example, you could have an ordered list of steps where each step has an unordered list of notes.

Example · Study Plan

<ol>
  <li>Morning Study
    <ul>
      <li>Read Chapter 3</li>
      <li>Make notes</li>
    </ul>
  </li>
  <li>Afternoon Practice
    <ul>
      <li>Complete exercises 1–5</li>
      <li>Review answers</li>
    </ul>
  </li>
  <li>Evening Review
    <ul>
      <li>Re-read notes</li>
      <li>Summarise key points</li>
    </ul>
  </li>
</ol>

Expected output:

1. Morning Study
     • Read Chapter 3
     • Make notes
2. Afternoon Practice
     • Complete exercises 1–5
     • Review answers
3. Evening Review
     • Re-read notes
     • Summarise key points

This is one of the most realistic patterns you will see in real web content · numbered main steps with bulleted sub-notes.

Here is every tag used in HTML lists, with a clear description of each:

Mistake 1 · Putting <li> Outside a List Container

Wrong:

<li>Item one</li>
<li>Item two</li>

Why it is wrong: <li> items must always live inside a <ul> or <ol> parent. Without the container, the browser may still try to display them, but the HTML is invalid and will behave unpredictably.

Correct:

<ul>
  <li>Item one</li>
  <li>Item two</li>
</ul>

Mistake 2 · Forgetting to Close </li> Before the Next Item

Wrong:

<ul>
  <li>Apple
  <li>Banana
  <li>Mango
</ul>

Why it is risky: Modern browsers are forgiving and often guess what you meant, but this is technically invalid HTML. When you add nested lists, missing </li> tags cause the nesting to break completely.

Correct:

<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Mango</li>
</ul>

Mistake 3 · Using <br> Tags Instead of List Items

Wrong:

<p>
  Apple<br>
  Banana<br>
  Mango
</p>

Why it is wrong: This looks like a list visually, but it is not semantically a list. Browsers, search engines, and screen readers cannot identify this as a list. Users relying on screen readers will not hear it announced as a list.

Correct:

<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Mango</li>
</ul>

Mistake 4 · Confusing <ul> and <ol>

Wrong example: Using <ul> for cooking steps where order matters.

<!-- Wrong! Steps must be in order -->
<ul>
  <li>Serve the food</li>
  <li>Cook the food</li>
  <li>Prepare the ingredients</li>
</ul>

Correct:

<!-- Right! Use <ol> when sequence matters -->
<ol>
  <li>Prepare the ingredients</li>
  <li>Cook the food</li>
  <li>Serve the food</li>
</ol>

Rule of thumb: Ask yourself: "Does the order of these items matter?" If yes → <ol>. If no → <ul>.

Mistake 5 · Putting Block Content Directly Inside <dl> Without <dt> or <dd>

Wrong:

<dl>
  Coffee
  A hot black drink
</dl>

Why it is wrong: Content must be wrapped in <dt> or <dd> tags. Bare text inside <dl> is invalid HTML.

Correct:

<dl>
  <dt>Coffee</dt>
  <dd>A hot black drink</dd>
</dl>

Mistake 6 · Closing the Outer List Too Early When Nesting

Wrong:

<ul>
  <li>Tea</li>
</ul>
  <ul>  <!-- This starts a SECOND separate list, not a nested one! -->
    <li>Black tea</li>
    <li>Green tea</li>
  </ul>

Correct:

<ul>
  <li>Tea
    <ul>   <!-- Inner list is INSIDE the <li>, before </li> -->
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
</ul>

The inner <ul> must be placed inside the <li> tag of its parent item, before that <li> is closed.