Ananta Code Academy
ananta::html-css
MODULE 01 · HTML FOUNDATIONS

Lists: Ordered, Unordered & Nested

Organize related items cleanly — bullet lists, numbered lists, and lists tucked inside other lists.

Day 06 of 30 Beginner ~20 min
01 · OVERVIEW

Two Kinds of Lists

HTML gives you two list containers: <ul> for an unordered (bulleted) list, and <ol> for an ordered (numbered) list. Inside either one, each item goes in its own <li> ("list item") tag.

LIVE PREVIEW

<ul> — unordered

  • HTML
  • CSS
  • JavaScript

<ol> — ordered

  1. Plan the page
  2. Write the HTML
  3. Style with CSS
02 · CUSTOMIZING ORDERED LISTS

The type & start Attributes

By default, <ol> numbers items 1, 2, 3... You can change both the numbering style and the starting number using two attributes.

snippet.html 
<ol type="A" start="3">
  <li>Third item, labeled C</li>
  <li>Fourth item, labeled D</li>
</ol>
type VALUE RESULT
type="1"

Default numeric style — 1, 2, 3...

type="A"

Uppercase letters — A, B, C...

type="a"

Lowercase letters — a, b, c...

type="I"

Uppercase Roman numerals — I, II, III...

03 · NESTED LISTS

Lists Inside Lists

To nest a list, place an entire <ul> or <ol> inside an <li> of the outer list — not beside it. This is exactly the "boxes inside boxes" nesting rule from Day 2, applied to lists.

snippet.html 
<ol>
  <li>Set up your tools
    <ol type="a">
      <li>Install VS Code</li>
      <li>Install a browser</li>
    </ol>
  </li>
  <li>Write your first file</li>
</ol>
LIVE PREVIEW
  1. Set up your tools
    1. Install VS Code
    2. Install a browser
  2. Write your first file
A COMMON MISTAKE

Placing a nested <ul> or <ol> directly inside another <ul>/<ol> — instead of inside an <li> — breaks the structure. The nested list must always sit inside a list item.

04 · BREAKDOWN

Breaking Down What You Just Learned

1

<ul>Unordered list — bulleted, used when item order doesn't carry meaning.

2

<ol>Ordered list — numbered by default, used when sequence matters.

3

<li>An individual list item — must live directly inside a <ul> or <ol>.

4

type & startChange an ordered list's numbering style and starting value.

5

Nested listsA full <ul> or <ol> placed inside a single <li> of the outer list.

05 · PRACTICE

Try It Yourself

EXERCISE

In day5.html, add an <ol> below your gallery listing three steps you took to build it. Give it type="A" and see how the numbering changes.

06 · TODAY'S PRACTICE

Build a Recipe Page

HANDS-ON EXERCISE

Ingredients and steps, properly listed

Create a new file called day6.html inside your course folder and build a simple recipe page using both list types.

  1. Start with the full DOCTYPE, html, head, and body structure.
  2. Add an <h1> with the name of a dish you like.
  3. Add an <h2> "Ingredients" followed by a <ul> listing at least five ingredients.
  4. Add an <h2> "Steps" followed by an <ol> listing at least four steps in order.
  5. Inside one of the steps, nest a <ul> listing two optional add-ins or substitutions.
  6. Give the ordered list a start value other than 1, and observe how it changes the numbering.
07 · RECAP

Recap

<ul> VS <ol>

Unordered lists are bulleted; ordered lists are numbered and imply sequence.

<li>

Every list item must sit directly inside a <ul> or <ol>.

type & start

Customize an ordered list's numbering style (1, A, a, I) and starting value.

NESTING

A nested list goes inside an <li>, never directly beside the outer list's items.

08 · SUMMARY

Key Takeaways

  • <ul> creates bulleted lists; <ol> creates numbered lists.
  • Every <li> must be a direct child of a <ul> or <ol>.
  • type and start let you customize an ordered list's numbering.
  • Nested lists live inside an <li> of the outer list, not beside it.
  • Choosing <ul> vs <ol> correctly communicates meaning, not just appearance.
Course Overview