Web Development:

Setting the HTML ordered list (<ol>) start value

Summary

The start attribute in HTML is used to determine the starting value (number) for an ordered list (<ol>), allowing customization of the list's numbering. It can be set to any positive, zero, or negative value, and works even when the ordered list is nested within an unordered list.

Published:

2024-12-12

Updated:

2025-02-25

Reading time:

01:32

Author:

Jonas Jared Jacek

Tags:

web development, html

License:

CC BY-SA 4.0

Permalink:

Ordered list (ol) start value

Introduction #

The start attribute in HTML is used with the <ol> (ordered list) element to specify the starting number for the list items. in HTML, by default, ordered lists start with the number 1, but the start attribute allows you to change this starting value to any number you choose.

The start attribute only works with ordered lists (<ol>), not unordered lists (<ul>).

Positive starting number #

To set the start value of an ordered list to 5, simply do:

<ol start="5">
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

The ordered list will start numbering from 5, producing:

5. First item
6. Second item
7. Third item

Of course, this also works if the ordered list is contained in an unordered list.

<ul>
  <li>Item 1</li>
  <li>Item 2
    <ol start="5">
      <li>First item</li>
      <li>Second item</li>
      <li>Third item</li>
    </ol>
  </li>
  <li>Item 3</li>
</ul>

Also, the ordered list, inside and unordered list, will start numbering from 5, producing:

• Item 1
• Item 2
  5. First item
  6. Second item
  7. Third item
• Item 3

Negative starting number #

You can use negative numbers or zero if needed:

<ol start="-3">
  <li>Negative three</li>
  <li>Negative two</li>
  <li>Negative one</li>
</ol>

The ordered list will start numbering from -3, producing:

-3. Negative three
-2. Negative two
-1. Negative one

Use cases #

• Custom starting points:
  If you have a list where the numbers should not start at 1, for example, continuing a list from another page, you can use the start attribute to define the starting number.
• Continuing sequences:
  In multi-part documents or when listing steps, you might want the numbering to continue from a specific point (e.g., continuing from step 5 in a list of steps).

Further readings #

Sources and recommended, further resources on the topic:

• WHATWG: HTML specification: ol element
• MDN: ol element

Author

Jonas Jared Jacek (J15k)

Jonas works as project manager, web designer, and web developer since 2001. On top of that, he is a Linux system administrator with a broad interest in things related to programming, architecture, and design. See: https://www.j15k.com/

<p xmlns:cc="http://creativecommons.org/ns#" xmlns:dct="http://purl.org/dc/terms/"><a property="dct:title" rel="cc:attributionURL" href="https://www.ditig.com/setting-the-html-ordered-list-start-value">Setting the HTML ordered list (<ol>) start value</a> by <a rel="cc:attributionURL dct:creator" property="cc:attributionName" href="https://www.j15k.com/">Jonas Jared Jacek</a> is licensed under <a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank" rel="license noopener noreferrer">CC BY-SA 4.0</a>.</p>