snippethtmlTip
Start your ordered HTML lists at a different number
Viewed 0 times
listsyournumberorderedstarthtmldifferent
Problem
Ordered lists in HTML start at the number
A lesser-known attribute of the
https://codepen.io/chalarangelo/pen/GRaRqmZ
As you can see, you can use it for ordered lists, as well as nested order lists. It even works with every
1 by default. But did you know you can customize the starting number of your ordered lists? This might feel like an uncommon need, yet I'm sure I've had a use for it at some point in the past.A lesser-known attribute of the
<ol> tag is the start attribute. This attribute allows you to specify the number at which the list should start.https://codepen.io/chalarangelo/pen/GRaRqmZ
As you can see, you can use it for ordered lists, as well as nested order lists. It even works with every
list-style-type you can think of, including Roman numerals and alphabetic characters.Solution
<ol start="4">
<li>Lorem</li>
<li>Ipsum</li>
<li>
<ol start="12">
<li>Dolor</li>
<li>Sit</li>
</ol>
</li>
<li>Amet</li>
<li>Consectetur</li>
</ol>https://codepen.io/chalarangelo/pen/GRaRqmZ
As you can see, you can use it for ordered lists, as well as nested order lists. It even works with every
list-style-type you can think of, including Roman numerals and alphabetic characters.Code Snippets
<ol start="4">
<li>Lorem</li>
<li>Ipsum</li>
<li>
<ol start="12">
<li>Dolor</li>
<li>Sit</li>
</ol>
</li>
<li>Amet</li>
<li>Consectetur</li>
</ol>ol ol {
list-style-type: lower-roman;
}Context
From 30-seconds-of-code: start-ordered-list-at-different-number
Revisions (0)
No revisions yet.