HTML Fundamentals

Lists

Organize related content into clean bulleted, numbered, and nested lists.

HTML Beginner

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

>_ What Are HTML Lists?

HTML lists organize related pieces of information into an easy-to-read structure. They can display items with bullets, numbers, or even lists inside other lists.

You’ll find lists everywhere on the web: navigation menus, instructions, recipes, rankings, shopping lists, feature lists, and much more.

<ul>

Unordered Lists

Use a bulleted list when the order of the items is not important.

<ol>

Ordered Lists

Use a numbered list when sequence, ranking, or order matters.

<li>

List Items

Each individual item inside a list is created with the <li> element.

>_ Unordered Lists

An unordered list uses the <ul> element. Each item inside it uses <li>.

unordered-list.html

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

>_ Ordered Lists

An ordered list uses <ol>. Browsers normally display its list items with numbers.

ordered-list.html

<ol>
  <li>Learn HTML</li>
  <li>Practice CSS</li>
  <li>Build a Website</li>
</ol>

>_ Nested Lists

A list can also appear inside another list item. This is called a nested list and is useful when information contains categories or sub-items.

nested-list.html

<ul>
  <li>Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </li>
</ul>

>_ Quick Reference

<ul>

Creates an unordered or bulleted list.

<ol>

Creates an ordered or numbered list.

<li>

Defines an individual item inside a list.

Nested List

Places another list inside a list item to represent sub-items or categories.

💡

Remember

Choose your list based on meaning. Use <ol> when order matters and <ul> when it does not.

Ready to Code?

Let’s organize some content.

Build a simple learning roadmap using unordered, ordered, and nested HTML lists.

⚡

mC0de Challenge

Build Your Coding Roadmap

Create a webpage that organizes your coding goals using the three list concepts from this lesson.

✓ Add an <h1> titled My Coding Roadmap.
✓ Create an <ul> containing at least three technologies you want to learn.
✓ Create an <ol> showing three learning steps in order.
✓ Add a nested list beneath one of your technologies.
✓ Make sure every list entry uses <li>.

>_ Challenge accepted. Build it below.

mC0de Interactive Sandbox

Lists Challenge

Live Preview

HTML Input EDIT

Live Result PREVIEW

💡 Add and rearrange list items to see the result instantly. Reset always restores the starter code.

✓

Lesson 04 Recap

What You’ve Learned

✓ How HTML lists organize related pieces of information.

✓ How to create bulleted lists using <ul>.

✓ How to create numbered lists using <ol>.

✓ How <li> defines each individual list item.

✓ How to create nested lists containing sub-items.

✓ When to choose an ordered list instead of an unordered list.

Nicely organized! You can now turn groups of information into structured, easy-to-read HTML lists.

🚀

Nice work!

Finished this lesson? Mark it complete to track your progress.

← Links HTML & CSS Home Next Lesson → Images