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:
- Ordered lists – often called numbered lists
- Unordered lists – often called bulleted lists
In this post, I cover the following:
- Ordered lists
- Alternative list styles
- Changing or restarting list numbering
- Reverse-ordered lists
- Unordered lists
- Multilevel lists
- Interactive examples
Unfamiliar with HTML? Check out my 5-part Anatomy of an HTML page series.
An ordered list is created using the
<ol> element. All list items within are created using the
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:
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>
lower-roman style to the list results in this output:
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:
- First step
- Second step
Some explanatory text that breaks up the list.
- Third step
- 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:
- Step A
- Step B
- Step D
- Step E
A note about deprecated code
You may see some advice on the web to the effect that the
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.
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:
If you see the numbers in ascending rather than descending order, your browser does not yet support the
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.
An unordered list is created using the
<ul> element. All list items within are created using the
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.
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:
- Red apples
- Green apples
To edit the examples used above, take a look at this CodePen page.
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.
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
- Series index – an overview of each part
- Part 1 – building blocks of HTML
- Part 2 – headings, images, links and lists
- Part 3 – comments, tables and special characters
- Part 4 – quoting and citing
- Part 5 – the head element, CSS and metadata
- HTML lists – ordered and unordered lists
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