HTML for Kids · Lesson

Lists: Ordered and Unordered

Create numbered and bullet-point lists.

Lists: Ordered and Unordered is a free HTML for Kids lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the HTML for Kids learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

1

Lists: Ordered and Unordered

Welcome to the next lesson! Today, we’ll learn how to create lists in HTML. Lists help organize information and make it easier to read.

2 What Are Lists?

Lists are a great way to group related items together. HTML has two main types of lists:

Ordered Lists: Items are numbered (1, 2, 3...).
Unordered Lists: Items are bulleted.

Let’s learn how to create both types!

3 Creating an Ordered List

An ordered list is created using the <ol> tag. Each item in the list is added using the <li> (list item) tag.

Example:

<ol>
  <li>Wake up</li>
  <li>Eat breakfast</li>
  <li>Go to school</li>
</ol>

4 Creating an Unordered List

An unordered list is created using the <ul> tag. Each item is added using the <li> tag, just like in ordered lists.

Example:

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

5 Nested Lists

You can create a list inside another list. This is called a nested list. You can nest ordered and unordered lists within each other.

Example:

<ul>
  <li>Fruits
    <ul>
      <li>Apples</li>
      <li>Bananas</li>
    </ul>
  </li>
  <li>Vegetables
    <ul>
      <li>Carrots</li>
      <li>Spinach</li>
    </ul>
  </li>
</ul>

6 Lists with Descriptions

HTML also allows you to create description lists using the <dl>, <dt>, and <dd> tags:

<dl>: Defines the list.
<dt>: Defines the term (title).
<dd>: Defines the description.

Example:

<dl>
  <dt>HTML</dt>
  <dd>The language used to create web pages.</dd>
  <dt>CSS</dt>
  <dd>The language used to style web pages.</dd>
</dl>

7 Adding Style to Lists

You can use CSS to change the appearance of your lists. For example, you can change the type of bullet points or numbers.

Example:

<style>
  ul {
    list-style-type: square; /* Changes bullets to squares */
  }
  ol {
    list-style-type: upper-roman; /* Changes numbers to Roman numerals */
  }
</style>

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

<ol>
  <li>First Step</li>
  <li>Second Step</li>
</ol>

8 Try It Yourself

Let’s create a simple web page with ordered and unordered lists. Here’s an example:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Lists</title>
  </head>
  <body>
    <h1>My To-Do List</h1>
    <h2>Morning Routine</h2>
    <ol>
      <li>Wake up</li>
      <li>Brush my teeth</li>
      <li>Have breakfast</li>
    </ol>
    <h2>Shopping List</h2>
    <ul>
      <li>Milk</li>
      <li>Bread</li>
      <li>Eggs</li>
    </ul>
  </body>
</html>

9

10 Great Job!

Congratulations! You’ve learned how to create ordered and unordered lists, nested lists, and description lists. These are great tools for organizing information on your web pages. In the next lesson, we’ll learn how to add links to connect different pages and websites. Get ready for more fun!

Lists: Ordered and Unordered — illustration 10

Frequently asked questions

Is the “Lists: Ordered and Unordered” lesson free?

Yes — the full text of “Lists: Ordered and Unordered” is free to read here on the web, and the HTML for Kids course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the HTML for Kids course, upgrade to CoddyKit PRO.

What will I learn in “Lists: Ordered and Unordered”?

Create numbered and bullet-point lists. You practise HTML for Kids with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start HTML for Kids?

No prior experience is required. HTML for Kids on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Lists: Ordered and Unordered” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this HTML for Kids lesson?

Yes. Every HTML for Kids lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to HTML for Kids