How to specify the start of an ordered HTML list

Published at: May 29 2022
Updated at: Oct 21 2024
Reading time: 2min

This post is part of my Today I learned series in which I share all my web development learnings.

Attention! I discovered a new HTML attribute. Let me introduce you to value. 👇

Quick HTML tip: I just discovered that `li` elements support a `value` attribute to configure the start of an ordered list. Example showing an ordered list including a list item that defines a `value` property.

This Tweet was trending quite a bit. When many people see something, there are good comments.

It turned out that there are multiple ways to control the numbers of an ordered list.

Let's have a quick look!

Specify a list's start using `start`

First, you can specify the list index with the start attribute. Ordered lists usually start at 1.

HTML

<p>Here are the first two:</p>
<ol>
  <li>One</li>
  <li>Two</li>
</ol>
<p>And the last two:</p>
<ol start="3">
  <li>Three</li>
  <li>Four</li>
</ol><p>Here are the first two:</p>
<ol>
  <li>One</li>
  <li>Two</li>
</ol>
<p>And the last two:</p>
<ol start="3">
  <li>Three</li>
  <li>Four</li>
</ol>

CSS

body {
 color: #eee;
}body {
 color: #eee;
}

Preview

start is valuable if your lists are divided by paragraphs and additional information.

Define the list item position using `value`

You can also control the position of a single list item with the value attribute.

HTML

<p>Here are the winners:</p>
<ol>
  <li>First</li>
  <li value="1">Also first</li>
  <li>Second</li>
  <li>Third</li>
</ol><p>Here are the winners:</p>
<ol>
  <li>First</li>
  <li value="1">Also first</li>
  <li>Second</li>
  <li>Third</li>
</ol>

CSS

body {
 color: #eee;
}body {
 color: #eee;
}

Preview

value is valuable if you're dealing with rankings and two entries are in the same position.

Bonus: Control list styles via CSS

And for completeness: you can also control list styles via the list-style property and a custom @counter-style.

HTML

<ol>
  <li>First</li>
  <li value="1">Second</li>
  <li>Third</li>
</ol><ol>
  <li>First</li>
  <li value="1">Second</li>
  <li>Third</li>
</ol>

CSS

@counter-style circled-alpha {
 system: fixed;
 symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ;
 suffix: " ";
}

ol {
 list-style: circled-alpha;
}@counter-style circled-alpha {
 system: fixed;
 symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ;
 suffix: " ";
}

ol {
 list-style: circled-alpha;
}

Preview

About Stefan Judis

Frontend nerd with over ten years of experience, freelance dev, "Today I Learned" blogger, conference speaker, and Open Source maintainer.

How to specify the start of an ordered HTML list

Specify a list's start using `start`

Define the list item position using `value`

Bonus: Control list styles via CSS

About Stefan Judis

Related Topics

Related Articles

How to specify the start of an ordered HTML list

Specify a list's start using start

Define the list item position using value

Bonus: Control list styles via CSS

About Stefan Judis

Related Topics

Related Articles

Specify a list's start using `start`

Define the list item position using `value`