Ordered lists in HTML provide a powerful mechanism for displaying data and information in a structured numerical or alphabetical manner. In this post, we’ll learn about the start attribute that will allow us to customize the starting point of our lists.
HTML ordered lists can automatically keep track of how many items we have in a list and will apply the correct value to the list item and subsequent items in a sequential order. But sometimes, we want to take control over how the numbers are represented and in this case, we’ll look at how we can set a custom starting number or letter for our ordered lists in HTML.
Setting a Custom Starting Point for a List in HTML
To set a custom starting point for a list in HTML, we’ll use the ordered list tag <ol> and apply the start attribute to it with the value we’d like our list to start at. For example:
<ol start="10">
<li>Write Blog Post</li>
<li>Edit Blog Post</li>
<li>Publish Blog Post</li>
</ol>
The above ordered list will have the first list item start at 10, instead of 1, and the subsequent items will be 11 and 12. The content rendered would look like this:
- Write Blog Post
- Edit Blog Post
- Publish Blog Post
Setting a Custom Starting Point for a List in HTML with a Different Type
Did you know that HTML ordered lists aren’t limited to displaying list items in just numeric form? They can additionally represent ordered items in roman numerals as well as alphabetical characters. To set this, we’ll need to add another attribute to our <ol> element called type and here we’ll specify the type of marker to use for our ordered list of items.
By default, and if we don’t specify the type, it’ll default to type="1", which means our list items will be numbered with numbers. type="A" will have our list items numbered with uppercase letters, and subsequently type="a" will list our items numbered with lowercase letters. Finally, we can have our list items numbered with uppercase roman numerals or lowercase roman numerals by setting the type to either type="I" for uppercase or type="i" for lowercase.
To set a custom starting point in addition to a custom type, we can combine the type and start attributes in our ol element like so:
<ol type="A" start="24">
<li>Write Blog Post</li>
<li>Edit Blog Post</li>
<li>Publish Blog Post</li>
</ol>
In the above example, our first list item will start at X, followed by Y and Z for the subsequent list items, instead of the default A, B, C. It’s important to note that even when changing the type of list items, the start attribute always takes a number as the starting point, and passing anything else, will result in the starting item starting at 1.
Overwriting the start Attribute
Another way to control the starting value of your ordered list is to add a value attribute directly to your list items. This will supersede the start value if defined in the <ol> and subsequent numbering will be based of the that value. Let’s see an example:
<ol start="10">
<li>Write Blog Post</li>
<li value="25">Edit Blog Post</li>
<li>Publish Blog Post</li>
</ol>
This list will start at 10, then the next list item will be numbered 25, and the last item in the list will be numbered 26. Let’s see another example:
<ol start="5">
<li value="7">Write Blog Post</li>
<li>Edit Blog Post</li>
<li value="3">Publish Blog Post</li>
</ol>
In this instance, the first list item will be 7 instead of 5, the second list item will be 8, and the last list item, since it does have its own value attribute, 3.
Summary
In this post we learned about the start attribute that can be applied to ordered lists in HTML. The start attribute allows us to easily set a custom starting point for our HTML lists and works across all types of built-in numbering. We also learned how we can overwrite the default value and even the start attribute by adding a value attribute directly to the <li> list items in an ordered list.
Happy hacking.