Chapter 6 — Lists

Learning Outcome

Display structured data using all three types of HTML lists, including nested lists.

← 05 - Links & Navigation | Next → 07 - Semantic HTML5

6.1 Unordered List `<ul>`

Used when order doesn't matter — items are equal in rank.

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Renders as:

HTML
CSS
JavaScript

Changing Bullet Style (CSS)

<ul style="list-style-type: square;">  <!-- ■ square bullets -->
<ul style="list-style-type: circle;">  <!-- ○ circle bullets -->
<ul style="list-style-type: none;">    <!-- no bullets (for nav menus) -->

6.2 Ordered List `<ol>`

Used when sequence matters — steps, rankings, instructions.

<ol>
  <li>Open VS Code</li>
  <li>Create a new file — save as index.html</li>
  <li>Type your HTML</li>
  <li>Open with Live Server</li>
</ol>

`type` Attribute — Numbering Style

`start` Attribute — Starting Number

<!-- Start numbering from 5 -->
<ol start="5">
  <li>Fifth item</li>
  <li>Sixth item</li>
</ol>

<!-- Start from C with uppercase letters -->
<ol type="A" start="3">
  <li>Option C</li>
  <li>Option D</li>
</ol>

<!-- Reversed list -->
<ol reversed>
  <li>Gold medal</li>
  <li>Silver medal</li>
  <li>Bronze medal</li>
</ol>

6.3 Description List `<dl>`

Used for term–definition pairs — glossaries, FAQs, dictionaries.

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language — the structure of web pages.</dd>

  <dt>CSS</dt>
  <dd>Cascading Style Sheets — controls styling and layout.</dd>

  <dt>JavaScript</dt>
  <dd>A programming language that adds interactivity.</dd>
</dl>

6.4 Nested Lists

Lists can be nested inside each other. Indent clearly for readability.

<ul>
  <li>Frontend Development
    <ul>
      <li>HTML</li>
      <li>CSS
        <ul>
          <li>Flexbox</li>
          <li>Grid</li>
        </ul>
      </li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>Backend Development
    <ul>
      <li>Node.js</li>
      <li>Python</li>
    </ul>
  </li>
</ul>

Mixed nesting (ol inside ul):

<ul>
  <li>Step 1: Setup
    <ol>
      <li>Install VS Code</li>
      <li>Install Live Server extension</li>
    </ol>
  </li>
  <li>Step 2: Create Files</li>
</ul>

Nesting Rule

The nested <ul> or <ol> goes inside the <li> — not after it. ✅ <li>Item <ul>...</ul></li> ❌ <li>Item</li><ul>...</ul>

6.5 Which List Type to Use?

🚀 Recommended Projects

Project 1 — Recipe Page

Build a complete cooking recipe page with:

<ol> for cooking steps (order matters)
<ul> for ingredients
<dl> for nutrition facts (term = nutrient name, dd = value)

Project 2 — Top 10 List Page

Create a "Top 10 Movies / Books / Games" page using:

<ol> for the ranked list
Nested <ul> inside each <li> for details (release year, genre, director)

📌 Quick Recall

<ul> = unordered (bullets) — for items without sequence
<ol> = ordered (numbers) — for steps, rankings
<li> = list item — goes inside <ul> or <ol>
<dl> = description list | <dt> = term | <dd> = definition
Nested lists: put <ul>/<ol> inside the <li>, not after it
ol type="A" = A,B,C | type="I" = Roman numerals | start="5" = begin at 5