Learn SQL

How to Make an Ordered List in HTML: A Straightforward Guide for Beginners

By Cristian G. Guasch •  Updated: 09/18/23 •  9 min read

Diving into the world of web development, I’ve found that one of the most fundamental skills you need to master is creating ordered lists in HTML. It’s a simple process, yet essential for structuring your content effectively. Whether you’re jotting down steps for a recipe, outlining sections on a resume, or numbering points in an article (like this one), understanding how to make ordered lists will come in handy.

Now, let’s get straight to it. In HTML, an ordered list is created using the <ol> tag. This stands for “ordered list” and as its name implies, it creates a list where each item is numbered automatically by the browser.

Inside this tag, we use <li> tags – short for “list item”. Each <li> represents one item on our list. The beauty of it? As soon as you add these tags around your content, your browser does all the heavy lifting and automatically adds numbers before each line!

So there you have it – making an ordered list in HTML isn’t rocket science after all! In fact, with just two straightforward tags (<ol> and <li>) under your belt, you’re well on your way to organizing text with ease. Now go ahead and give it a shot; practice makes perfect after all! Let’s dive right in by understanding what HTML is. HTML, or Hyper Text Markup Language, is the backbone of almost every website you visit. It’s the coding language that structures content on the web and gives it meaning. Without HTML, your favorite blog post would just be a jumble of text and images with no structure or organization.

So why does this matter? Well, even if you’re not planning to become a developer, having a basic understanding of HTML can go a long way. You’ll be able to customize your blog posts more effectively and have greater control over how your content appears online. Plus, knowing your way around HTML could save you time and money when making updates to your site.

Now let’s get into some examples that illustrate how easy it is to use HTML to create an ordered list. An ordered list starts with the <ol> tag and ends with </ol>. Each item within the list is designated by <li> (list item) tags.

Here’s a simple example:

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

This will display as:

  1. Coffee
  2. Tea
  3. Milk

You see? It’s pretty straightforward! But don’t think that this is all there is to it – there are many ways you can modify these lists using various attributes within these tags for different purposes.

For instance, let’s say you want to make a list but instead of traditional numbers, you want Roman numerals for numbering items:

<ol type="I">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

This results in:

I. Coffee II. Tea III. Milk

Isn’t it fascinating how much control HTML gives you over your content? With just a little bit of learning, you’re already able to create and customize lists on your site! It’s this kind of flexibility that makes HTML such an essential tool in web development.

Exploring the Basics of Ordered Lists in HTML

Let’s delve into the world of ordered lists in HTML. If you’re not already familiar, HTML stands for HyperText Markup Language and forms the backbone of most websites we visit daily. Now, an ordered list is a fundamental component that allows us to display information sequentially.

When I’m crafting an ordered list in HTML, it starts with the <ol> tag. This tag represents the start of an ordered list and everything that follows will be part of this list until we close it off with </ol>. Each item within our neat little list is represented by a <li> or List Item tag. It’s like telling our website “Hey, here’s a new point for our ordered list!” For example:

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

In this instance, ‘Coffee’, ‘Tea’, and ‘Milk’ will appear as numerically ordered items on your webpage – simple but effective!

But did you know there are different types of orders? Yes indeed! By default, our web browser uses numbers (1, 2, 3…), but we can change this using the type attribute inside our opening <ol> tag. We’ve got three options: ‘1’ for decimal numbers (default), ‘A’ for uppercase letters, ‘a’ for lowercase letters, ‘I’ for uppercase Roman numerals and finally, ‘i’ for lowercase Roman numerals.

Here’s how you’d use it:

<ol type="A">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

With this snippet above Coffee would be listed as A., Tea as B., and Milk as C. Pretty neat, right?

Let’s not forget about the start attribute as well. It’s particularly handy when you want to begin your list at a number other than 1. For instance:

<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

In this case, Coffee would be item number 50, Tea number 51 and so on.

There you have it! With just these simple tags and attributes, we can create powerful ordered lists that enhance our website’s structure and readability. Alright, let’s dive right into the meat of it. Crafting an ordered list in HTML may sound like a monumental task if you’re new to coding, but I assure you, it’s simpler than you might think. The key lies in understanding the basic structure and components of an HTML document.

Let’s start with the basics. An ordered list in HTML is represented by the <ol> tag. Each item within this list is designated by a <li> or list item tag. Here’s a simple example:

<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

Run that code and voila! You’ve got yourself an ordered list on your webpage, with each item numbered automatically from one onwards.

Now, what if you want your list to start at a different number? Say from five instead of one? That’s where the ‘start’ attribute comes into play. By adding start="5" to your <ol> tag like so:

<ol start="5">
  <li>Fifth Item</li>
  <li>Sixth Item</li>
  <li>Seventh Item</li>
</ol>

You can manipulate where your list begins counting.

But wait there’s more! What about altering the type of markers used for numbering? Maybe Roman numerals or alphabets instead of Arabic numerals? Well, that’s totally doable too! You just have to use the ‘type’ attribute in your <ol> tag and specify whether you want upper-case roman (‘I’), lower-case roman (‘i’), upper-case alphabet (‘A’) or lower-case alphabet (‘a’). For example:

<ol type="I">
  <li>Item One </li>
   ...
   ...
   ...
<ol>

In the above code, you’ll see your list items marked with upper-case roman numerals.

Remember, HTML is fundamentally about structure and order, so it’s all about knowing which tags to use and where. With practice, creating ordered lists in HTML will become second nature. Don’t rush it; take your time to understand each tag and its function. Happy coding! Let’s dive right into one of the most common mistakes I see when folks are making ordered lists in HTML. It’s forgetting to close the list tag. This might seem like a small oversight, but it can lead to some major headaches down the road! Here’s an example of what not to do:

<ol>
  <li>Item 1</li>
  <li>Item 2</li>

Notice anything missing? That’s right, there’s no closing </ol> tag! This can cause unpredictable behavior when your page is rendered in a browser.

Next up on our list of common mishaps is improperly nested items. Remember, every <li> element must be contained within either an <ol> or <ul> element. If you’re looking to add sub-points to your list, they should also be contained within their own list tags:

<ol>
  <li>Main Point
    <ol>
      <li>Sub-point</li>
    </ol>
  </li>
</ol>

In this example, we’ve correctly nested our sub-point within its own ordered list (<ol>) inside the main point (<li>).

Lastly, let’s talk about skipping around with numbers. Did you know that HTML doesn’t care if you number your list items out of order? You could start your first item at ‘3’, and it’ll still show as ‘1’ when rendered!

<ol start="3">
  <li>Item 1 (displays as "1" despite starting at "3")</li>
  <li>Item 2 (displays as "2")</li>
</ol>

or 

<ol reversed start="5">
   <LI value="7">This is item number seven.</LI> 
   ...
   ...
   ...
   ... 
   <LI value="1">This is item number one.</LI> 
</ol>

While this might seem like a fun trick, it’s generally best to avoid doing so. It can lead to confusion when you’re trying to troubleshoot your lists later on.

In sum, making ordered lists in HTML can be a bit tricky at times! By remembering to close your list tags, properly nest items, and avoid playing around with numbers too much, you’ll be well on your way to mastering this fundamental aspect of web development.

Cristian G. Guasch

Hey! I'm Cristian Gonzalez, I created HTML Easy to help you learn HTML easily and fast.

Related articles