An ordered list is a list in which the items are numbered and the order matters.

This is as opposed to an unordered list where the items are bulleted by default (and the order doesn't matter).

Basic Syntax of the <ol> tag

The <ol> tag defines ordered lists in HTML. And the list items are defined by the <li> tag.

The <ol> tag is not an empty element, so it has a closing tag in </ol>

<ol>
      <li>...</li>
      <li>...</li>
      <li>...</li>
</ol>

In browsers, ordered lists appear as numbered lists, like this:

<ol>
   <li>HTML</li>
   <li>CSS</li>
   <li>JavaScript</li>
   <li>Tailwind</li>
   <li>React</li>
   <li>Mongo DB</li>
   <li>React</li>
</ol>

ss-1-4

If you are wondering why the list items are centered on the page, this CSS made it happen:

body {
      display: grid;
      place-items: center;
      height: 100vh;
    }

Attributes of the <ol> Tag

The <ol> tag accepts start, type, and reversed as attributes.

The type Attribute

The type attribute is used to specify which type of numbering you want to use for the list.

The default is Arabic numerals.

The type of lists that can be used are:

  • 1 for Arabic numerals (default)
<ol type="1">
   <li>HTML</li>
   <li>CSS</li>
   <li>JavaScript</li>
   <li>Tailwind</li>
   <li>React</li>
   <li>Mongo DB</li>
   <li>React</li>
</ol>

ss-1-4

P.S.: If you will be using Arabic numerals as the numbering type, you don’t need to specify it since it’s the default.

  • A for uppercase letters
<ol type="A">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>Tailwind</li>
  <li>React</li>
  <li>Mongo DB</li>
  <li>React</li>
</ol>

ss-2-4

  • a for lowercase letters
<ol type="a">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>Tailwind</li>
  <li>React</li>
  <li>Mongo DB</li>
  <li>React</li>
</ol>

ss-3-5

  • i for lowercase Roman numerals
<ol type="i">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>Tailwind</li>
  <li>React</li>
  <li>Mongo DB</li>
  <li>React</li>
</ol>

ss-4-5

  • I for uppercase Roman numerals
<ol type="I">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>Tailwind</li>
  <li>React</li>
  <li>Mongo DB</li>
  <li>React</li>
</ol>

ss-5-6

The start Attribute

The start attribute can be brought in to specify which number to start the list from. So, it accepts an integer as a value. The default is 1.

If you specify a number like 22, the next list item takes the next number 23, on and on…

<ol start="22">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>Tailwind</li>
  <li>React</li>
  <li>Mongo DB</li>
  <li>React</li>
</ol>

ss-6-2

The reversed Attribute

When you use the reversed attribute on an ordered list, the list items are rendered in reverse order. That is, from the highest number to the lowest.

You don’t need to specify a value for the reversed attribute because any value you specify will be neglected.

<ol reversed>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>Tailwind</li>
  <li>React</li>
  <li>Mongo DB</li>
  <li>React</li>
</ol>

ss-7-3

Conclusion

In this article, you learned about the <ol> tag and its attributes, so you can have more control over it in your projects.

If you find this article helpful, don't hesitate to share it with your friends and family.