LESSON 2.5

Making Lists with HTML

Ordered, unordered, and everything in between

Learn how to create bulleted and numbered lists in HTML — two of the most frequently used elements on any webpage.

💡 The Concept

Why Lists Matter in Web Development

HTML lists are one of the most versatile elements in your toolkit, used for everything from navigation menus to step-by-step instructions. Lists are everywhere on the web: navigation menus, recipe ingredients, step-by-step instructions, feature comparisons, to-do items. The humble HTML list is one of the most frequently used structures you’ll encounter as a web developer. Understanding how to create ordered and unordered lists in HTML is a fundamental skill that you’ll use on virtually every website you build. Let’s break down exactly how they work and when to use each type.

The Two Main Types of HTML Lists

HTML gives you two primary list types to work with: unordered lists and ordered lists. The difference is straightforward. Unordered lists display bullet points, and ordered lists display numbers (or letters). Choosing between them depends on whether the sequence of items matters.

Unordered Lists

An unordered list is used when the order of items doesn’t matter. Think of a grocery list, a set of features, or a navigation menu. The browser renders each item with a bullet point by default.

To create an unordered list, you wrap your list in <ul> tags, and each individual item goes inside <li> (list item) tags:

<h2>List of Classes I'm Taking This Semester</h2>
<ul>
  <li>Calculus 1</li>
  <li>Adobe PhotoShop</li>
  <li>Introduction to Programming</li>
</ul>

The result looks like this in a bulleted list:

Ordered Lists

An ordered list is used when the sequence of items does matter. Recipes, step-by-step instructions, rankings, and top-ten lists are all perfect candidates. The browser automatically numbers each item for you.

<h2>My Favorite Classes, In Order</h2>
<ol>
  <li>Web Fundamentals</li>
  <li>Server-Side Programming</li>
  <li>Client-Side Programming</li>
</ol>

The numbered list looks like this:

🎬 Video Demonstration

In this video I demonstrate how to create numbered and bulleted lists in HTML. For each item in numbered and bulleted lists, you use the <li> tags.

Exercise: Try It Yourself

Try coding this unordered list in JSFiddle or in your template:

Minneapolis Lakes

Bde Maka Ska
Lake Harriet
Lake of the Isles
Cedar Lake
Lake Nokomis

Now try the ordered list. Notice that you only need to change the <ul> tags to <ol> tags. Feel free to change the order to your favorites!

My Favorite Minneapolis Lakes in Order

Lake Harriet
Bde Maka Ska
Lake of the Isles
Cedar Lake
Lake Nokomis

Here is a screenshot of how this looks in JSFiddle:

JSFiddle showing an ordered and unordered list.

Choosing Between Ordered and Unordered

The decision is simple: ask yourself, “Does the order matter?”

  • Use <ol> when rearranging the items would change the meaning. Consider instructions, rankings, timelines, or numbered steps.
  • Use <ul> when the items are a collection with no inherent sequence. Think of features, ingredients, navigation links, or categories.

This isn’t just a visual choice. Screen readers and search engines use the list type to understand your content’s structure. An ordered list signals that sequence is meaningful, which improves both accessibility and SEO.

Go Build Some Lists!

HTML lists are deceptively simple, but they’re one of the most powerful tools in your markup toolbox. From structuring navigation menus to presenting data in a readable format, you’ll find yourself reaching for <ul>, <ol>, and <li> on nearly every project. Now that you understand how both list types work, try creating your own. Build a top-five list of your favorite movies, outline the steps to your morning routine, or sketch out a navigation menu for a dream website. The best way to learn HTML is to write it, so open up your text editor and start listing!

❓ Frequently Asked Questions

Why use a list tag instead of just typing items with line breaks?

A list tag tells the browser, search engines, and screen readers that these items belong together as a group. Line breaks just create visual spacing with no structure behind it. A screen reader navigating a page with list tags knows it has entered a list and how many items are in it. One that encounters a series of line-broken text has no idea. Using the right tag for the right content is one of the most important habits to build early.

Can I put other HTML elements inside a list item, like a link?

Yes. A list item can contain links, images, or other tags, not just plain text. This becomes important when you build navigation menus, where each menu item is typically a list item wrapping a link. You will see this pattern used throughout the lessons.

Can I nest a list inside another list?

Yes. To create a sub-list, place a new ul or ol inside a list item. The browser will indent it automatically. This is useful for outlines, multi-level navigation menus, and any content that has categories with sub-items beneath them.

Can I change the bullet style or the starting number?

Yes you can. You will do that with CSS, which we will cover in the CSS Fundamentals lessons. For now, focus on using the right list type for the right content. The styling comes later.

★ Key Takeaways

Lists are one of the most useful structures in HTML. This lesson covered ordered lists and unordered lists, and showed you how to use them for everything from instructions to navigation menus. Next, you will learn about HTML semantic elements, which give your markup more meaning beyond just how it looks. Semantic HTML is better for accessibility and search engines.

Next Lesson: HTML Semantic Elements: Writing Meaningful Markup

← Back to HTML Fundamentals Lessons

← Back to All Lessons

Google Ads

The costs of this website are partially offset by revenue from Google Ads.

Tools of the Trade

HTML/CSS Lessons