HTML Lists

Sometimes you’ve got a handful of things to share—like a to-do list, favorite snacks, or steps in a recipe—and a paragraph just feels too mushy. That’s where HTML lists come in. They’re perfect for keeping things neat and readable, and they’re so easy you’ll wonder why you didn’t start with them sooner. Let’s dig in!

HTML gives you two main flavors: ordered lists (numbered) and unordered lists (bulleted). Here’s how they roll:

1. Ordered Lists with <ol>

Use this when order matters—like steps or rankings. It’s simple:

<ol>
<li>Wake up</li>
<li>Code</li>
<li>Eat pizza</li>
</ol>

In the browser, you’ll see:

  1. Wake up
  2. Code
  3. Eat pizza

The <ol> sets it up, and each <li> (list item) gets a number automatically.


2. Unordered Lists with <ul>

No order needed? Go with bullets:

<ul>
<li>Cats</li>
<li>Dogs</li>
<li>Birds</li>
</ul>

That turns into:

  1. Cats
  2. Dogs
  3. Birds

Same deal: <ul> starts it, <li> tags the items, and you get dots instead of numbers.

I’ve messed with these plenty. Once, I forgot a </li>—it still worked, but it’s cleaner to close them. You can even nest lists for fun:

<ul>
<li>Fruits
<ol>
<li>Apple</li>
<li>Banana</li>
</ol>
</li>
<li>Veggies</li>
</ul>

That’s “Fruits” with a numbered “Apple” and “Banana” under it—handy for subcategories.


Lists are my go-to for breaking up text. They’re quick to write and make your page feel less like a wall of words. Next time you’re coding, try a <ul> for random stuff or an <ol> for a how-to. It’s like giving your ideas a comfy little lineup!

How-To Guides for HTML

No How-To Guide is available right now.

Keep Learning & Level Up!

Enhance your HTML skills with our in-depth tutorials and interactive quizzes.

Explore HTML Quiz