Skip to content

Home

Start your ordered HTML lists at a different number

Ordered lists in HTML start at the number 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.

<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;
}

See the embedded CodePen

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.

More like this

Start typing a keyphrase to see matching snippets.