📋 Lists in HTML - Ordered and Unordered Lists

📅 August 17, 2025

✍️ By Evans

Hey everyone! 👋

In this post, I'm talking about something I just learned — lists in HTML. It might sound basic, but lists are super useful when writing tutorials, menus, steps, or anything where you want to organize information.

Lists help you group related items together, and trust me, they make your content look clean and structured. Let's break them down. 🧾

🧱 The Two Main Types of Lists

HTML gives us two main types of lists:

1. Ordered Lists (<ol>) - for numbered lists
2. Unordered Lists (<ul>) - for bulleted lists

Let me show you how they work 👇

🔢 Ordered Lists (<ol>)

Ordered lists use numbers. The tag for it is <ol>, which stands for “Ordered List”. Each item inside the list goes in an <li> tag (that means “List Item”).

<ol>
  <li>Learn HTML basics</li>
  <li>Understand CSS styling</li>
  <li>Move on to JavaScript</li>
</ol>
                            

That would display as:

1. Learn HTML basics
2. Understand CSS styling
3. Move on to JavaScript

💡 Tip: You can even start your list with a different number using the start attribute:

<ol start="5">
  <li>Step five</li>
  
Step six</li>
</ol>
                        

⚫ Unordered Lists (<ul>)

Unordered lists use bullets instead of numbers. The tag is <ul> (stands for “Unordered List”). They're great for general collections of items that don’t have a specific order.

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

That will show up as:

• HTML
• CSS
• JavaScript

You can also nest lists inside each other to create sub-lists.

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

This will create sub-lists under “Frontend” — super helpful for organizing things clearly.

🧠 What I Learned

• Use <ol> when order matters
• Use <ul> when it doesn't
• Always wrap list items in <li>
• You can style lists later using CSS (like removing bullets or changing numbers)

😅 Mistakes I Made

• ❌ Forgot to close the <li> tags (that broke the whole list)
• ❌ Used <li> without wrapping it in <ul> or <ol> (it won't work alone!)
• ❌ Tried to put paragraphs directly inside <ul> — didn't look right

🧪 Real Example I Practiced

<h2>Things I've Learned So Far:</h2>
<ul>
  <li>Basic HTML Structure</li>
  <li>Headings and Paragraphs</li>
  <li>Formatting Text</li>
  <li>Creating Links</li>
  <li>Adding Images</li>
</ul>

                        

Simple, clean, and helpful!

🎯 Final Thoughts

Lists are one of those small things that make a website feel neat and organized. Now that I know how to use them, I can write tutorials, to-do lists, or even recipe steps (yes, I'm hungry 😅).

👉 What's Next?

Next, I'll be learning about Creating Tables - Organizing Data in HTML — where we'll use rows and columns to display information in a nice grid format.

As always, thanks for reading!

Stay curious and keep coding 🚀

— Evans 💻