Technical writing services by Espirian

HTML lists

Most of us know how to create a list in a word processor. In HTML, the process is a little more involved.

There are 2 types of HTML list:

In this post, I cover the following:

Knowledge check

Unfamiliar with HTML? Check out my 5-part Anatomy of an HTML page series.

Ordered lists

An ordered list is created using the <ol> element. All list items within are created using the <li> element.

Ordered lists are used when the list items should follow a sequence, with Arabic numerals (1, 2, 3, etc.) as the default list item markers. Here is an example:

<!-- Pay attention, learner drivers -->
<ol>
   <li>Mirror</li>
   <li>Signal</li>
   <li>Manoeuvre</li>
</ol>

Here is the output of the code:

  1. Mirror
  2. Signal
  3. Manoeuvre

Now, look back at the code and notice that the numbers are not shown there. Adding another list item anywhere within the list will result in the list being automatically renumbered – a handy feature familiar to anyone who has ever created a numbered list in a word processor.

Alternative list styles

We don’t have to stick to common numerals when creating an ordered list. Special list styles allow us to use alternative numbering schemes. Here is an example:

<ol style="list-style-type:lower-roman;">
   <li>Mirror</li>
   <li>Signal</li>
   <li>Manoeuvre</li>
</ol>

Adding the lower-roman style to the list results in this output:

  1. Mirror
  2. Signal
  3. Manoeuvre

There are several different list style types. You can find the full set on the CSS list-style-type Property page of the W3Schools site.

The method above uses CSS, which we’ll cover in more detail in future posts. Another way of changing an ordered list’s numbering style is by using the type="" attribute. This method is better in some ways, but, unlike CSS, it doesn’t support all possible numbering styles. For more information about the type="" attribute, see the HTML <ol> type Attribute page of the W3Schools site.

Changing or restarting list numbering

It’s sometimes necessary to change the list numbers themselves (rather than just their style), often because we wish to split up a list into two or more parts. We can do this by using the start="n" attribute on the <ol> element, where n represents the number at which the list should start.

Here is an example:

<ol>
   <li>First step</li>
   <li>Second step</li>
</ol>

Some explanatory text that breaks up the list.
<!-- This break in the list could be of any length. -->

<ol start="3">
   <li>Third step</li>
   <li>Fourth step</li>
</ol>

And here is the result:

  1. First step
  2. Second step

Some explanatory text that breaks up the list.

  1. Third step
  2. Fourth step

An alternative approach is to use the value="n" attribute on the relevant <li> element. This time, n represents the number to assign to the targeted <li> element. Here’s an example:

<ol>
   <li>Step A</li>
   <li>Step B</li>
   <li value="4">Step D</li> <!-- Subsequent numbers adjust automatically -->
   <li>Step E</li>
</ol>

And here’s the output, with a jump in numbering on the third step:

  1. Step A
  2. Step B
  3. Step D
  4. Step E

A note about deprecated code

You may see some advice on the web to the effect that the start="n" and value="n" attributes are deprecated and therefore should not be used. This advice applies to the old HTML 4.01 standard but not the current HTML 5 standard – so feel free to take advantage of these very useful features.

Reverse-ordered lists

The reversed attribute allows us to reverse the ordering of ordered lists, which can be useful for creating a countdown. At the time of writing, this feature is not supported by all web browsers (see browser support list).

Here’s an example:

<ol reversed>
   <li>Bronze</li> <!-- Should be numbered 3 -->
   <li>Silver</li> <!-- Should be numbered 2 -->
   <li>Gold</li>   <!-- Should be numbered 1 -->
</ol>

And here’s the result:

  1. Bronze
  2. Silver
  3. Gold

If you see the numbers in ascending rather than descending order, your browser does not yet support the reversed attribute.

The long-hand alternative for writing out a reverse-ordered list would be to use the value="n" attribute on each <li> element, entering the numbers manually.

Unordered lists

An unordered list is created using the <ul> element. All list items within are created using the <li> element.

Unordered lists are used when the list items need not follow a sequence, with bullets as the default list item markers. Here is an example:

<ul>
   <li>Apples</li>
   <li>Bananas</li>
   <li>Oranges</li>
</ul>

Here is the output of the code:

As with ordered lists, the list item markers in unordered lists can be changed. Here’s an example:

<ul style="list-style-type:circle;">
   <li>Apples</li>
   <li>Bananas</li>
   <li>Oranges</li>
</ul>

And here’s the output:

Again, refer to the CSS list-style-type Property page to see other list styles.

Multilevel lists

If we need to create lists within lists, we can do so by placing the code for a list inside the list item of a parent list. Here’s an example:

<ul>
   <li>Apples <!-- Instead of closing the list item, we start a new list -->
      <ul>
         <li>Red apples</li>
         <li>Green apples</li>
      </ul>
   </li> <!-- Now we close the Apples list item -->
   <li>Bananas</li>
   <li>Oranges</li>
</ul>

And here is the output:

Interactive examples

To edit the examples used above, take a look at this CodePen page.

CodePen – test your code

About CodePen

CodePen is a free web-based service for writing code (not just HTML) and seeing the results in the same browser window. The code is at the top of the page, the output at the bottom.

Conclusion

Ordered and unordered lists provide good examples of the importance of correctly nesting HTML elements. The examples given above should be fairly easy to follow – things do get more complicated when lists are nested within lists, though.

Don’t forget to post your questions in the comments below or drop me a line on Twitter. I’d love to hear from you.

Read the whole HTML series

Thanks for reading,

Subscribe for tips

Join 417 others on my free Espresso ☕️ email list to receive:

  • blog updates
  • free ebooks
  • discounts on consultancy
  • offers and secret stuff

🔒  No spam, I promise • privacy policy