HTML Ordered List <ol>

The ordered list is the second type of HTML list.

This list is used when the order of the items is important.

For example, Steps To Build A Deck could use an ordered list.

A post about 10 Toys For Your Pool could also use an ordered list, with some sort of rank, price lowest to highest or rated highest to lowest for example.

By default, HTML will use numbering, however you have the option to change the numbers to letters or roman numerals for example using CSS.

Here’s an example with default numbering:



<p>Steps To Build A Deck</p>

<ol>
 <li>Measure area you want deck to be</li>
 <li>Buy that amount of wood with 10% extra</li>
 <li>Build deck</li>
</ol>


Output:

Steps To Build A Deck

  1. Measure area you want deck to be
  2. Buy that amount of wood with 10% extra
  3. Build deck

You might have observed that the coding for the ordered lists is same as for the unordered lists.

The only difference is the opening and closing list tag for an ordered list is <ol> and for an unordered list it’s <ul>.

You can take your lists one step further by nesting them.

Nesting essentially allows us to have sub-bullet points in our lists.

To have sub-items, you essentially insert a whole new list, starting with the ol tag, under the li item you wish sub points for.

You can also nest an unordered list in an ordered list if it makes snese.

Here’s how:



<p>Steps To Build A Deck</p>

<ol>
 <li>Measure area you want deck to be
  <ol>
       <li>Start with the length and width</li>
       <li>Understand height for pillars</li>
       <li>Decide if there will be stairs</li>
  </ol>
 </li>
 <li>Buy that amount of wood with 10% extra</li>
 <li>Build deck</li>
</ol>


Output:

Steps To Build A Deck

  1. Measure area you want deck to be
    1. Start with the length and width
    2. Understand height for pillars if it’s not going to be built on the ground
    3. Decide if there will be stairs as extra material will be required to build stairs
  2. Buy that amount of wood with 10% extra
  3. Build deck

As you can see, we now have sub points under 1. Measure area you want deck to be.

However, in some instances, you may want to add extra sub points for an item, but it doesn’t make sense to number them.

So keep in mind, that any list can be nested with any other list.

In our example, lets use an unordered list as the nested one.

So we tweak our code like this:



<p>Steps To Build A Deck</p>

<ol>
 <li>Measure area you want deck to be
  <ul>
       <li>Start with the length and width</li>
       <li>Understand height for pillars</li>
       <li>Decide if there will be stairs</li>
  </ul>
 </li>
 <li>Buy that amount of wood with 10% extra</li>
 <li>Build deck</li>
</ol>


Output:

Steps To Build A Deck

  1. Measure area you want deck to be
    • Start with the length and width
    • Understand height for pillars if it’s not going to be built on the ground
    • Decide if there will be stairs as extra material will be required to build stairs
  2. Buy that amount of wood with 10% extra
  3. Build deck

This seems to flow better for our use case.

And keep in mind, you can also have multiple nested items in one list.



<p>Steps To Build A Deck</p>

<ol>
 <li>Measure area you want deck to be
  <ul>
       <li>Start with the length and width</li>
       <li>Understand height for pillars</li>
       <li>Decide if there will be stairs</li>
  </ul>
 </li>
 <li>Buy that amount of wood with 10% extra</li>
 <li>Build deck
  <ul>
       <li>Ensure you use safety equipment</li>
       <li>If unsure, hire a professional</li>
       <li>Don't forget to get a building permit</li>
  </ul>
 </li>
</ol>


Output:

Steps To Build A Deck

  1. Measure area you want deck to be
    • Start with the length and width
    • Understand height for pillars if it’s not going to be built on the ground
    • Decide if there will be stairs as extra material will be required to build stairs
  2. Buy that amount of wood with 10% extra
  3. Build deck
    • Ensure you use safety equipment
    • If unsure, hire a professional
    • Don’t forget to get a building permit!