HTML start Attribute

Introduction

The start attribute is used with ordered lists (<ol>) to specify the starting value of the list. By default, every ordered list begins numbering at 1. With start, you can begin at any valid integer—useful when continuing a list across sections, matching document chapter numbers, or resuming steps in a tutorial.

This attribute gives you flexible control over list numbering without manually typing numbers into each list item.

What You’ll Learn

Purpose of start

The primary purpose of the start attribute is to define the starting value of an ordered list. By default, ordered lists start at 1, but start lets you set a different initial number.

This is especially helpful when you combine multiple lists or need a specific sequence for your list items—for example, continuing step 6 after a paragraph break, or aligning list markers with chapter numbers in a long document.

📝 Syntax

Add start to an <ol> with a valid integer:

<ol start="5">
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
</ol>

Syntax Rules

• Valid only on <ol> (not on <ul> or <li>).
• Value must be a valid integer (positive, zero, or negative).
• Default when omitted: 1.
• Works with type (1, a, A, i, I) on the same element.
• Works with the boolean reversed attribute for descending order.
• IDL property: HTMLOListElement.start.

💎 Values

The start attribute accepts an integer that determines where numbering begins. The value represents the number of the first <li> in that list:

• start="1" — Default behavior (same as omitting the attribute).
• start="3" — First item displays as 3, then 4, 5, and so on.
• start="10" — Useful for continuing a long tutorial or document outline.
• start="0" or negative values — Valid per HTML; rarely used but supported.

<ol start="5">
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
</ol>

How It Works

In this example, the ordered list starts at 5 instead of the default 1. The browser increments the marker for each subsequent <li> automatically.

Applicable Elements

start vs manual numbering vs CSS counters

Examples Gallery

Basic start on ol, a full document outline, dynamic JavaScript updates, and continuing numbering across two lists.

<ol start="5">
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
</ol>

<ol start="3">
  <li>Introduction</li>
  <li>Background</li>
  <li>Main Content</li>
  <li>Conclusion</li>
</ol>

<ol id="dynamicList">
  <li>First Item</li>
  <li>Second Item</li>
  <li>Third Item</li>
</ol>

<script>
  document.getElementById("dynamicList").start = 10;
</script>

<ol>
  <li>Step one</li>
  <li>Step two</li>
  <li>Step three</li>
</ol>

<p>...content between list sections...</p>

<ol start="4">
  <li>Step four</li>
  <li>Step five</li>
</ol>

♿ Accessibility

• Use real lists — Keep steps in <ol>/<li> so assistive tech announces list length and position.
• Do not fake numbers in text — Typing “3.” inside each item breaks list semantics; use start instead.
• Logical order — When continuing lists, ensure start matches the previous section so screen reader users hear a coherent sequence.
• Nested lists — Each nested ol can have its own start; test with a screen reader when nesting deeply.
• reversed lists — With reversed, DOM order stays top-to-bottom; only markers count down.

💡 Best Practices