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
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.
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.
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.