How specify the starting number of an ordered HTML list

Published at: May 29 2022
Updated at: May 29 2022
Reading time: 2min

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

I discovered an HTML attribute that I hadn't seen before. Let me introduce you to the value attribute. 👇

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

349 retweets 2597 likes

Apr 04 2022

Open Tweet

Trending Tweets often come with priceless comments. And it turned out that there are multiple ways to control the numbers of an ordered list.

Let's have a quick look!

Specify the list start using `start`

Manuel pointed out that the start attribute also allows you to specify the beginning of the unordered list. Ordered lists usually start at 1.

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

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

Preview

This functionality is valuable if your listings are divided by paragraphs and additional information.

Define the list item position using `value`

As already mentioned; if you want to control the position of a single list item, you can also use the value attribute on a specific list item.

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

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

Preview

This functionality 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, there are also ways to control the list styles via list-style in CSS.

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

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


body {
 color: #eee;
}

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


body {
 color: #eee;
}

ol {
 list-style: circled-alpha;
}

Preview

How specify the starting number of an ordered HTML list

Specify the list start using `start`

Define the list item position using `value`

Bonus: Control list styles via CSS

Related Topics

Related Articles

How specify the starting number of an ordered HTML list

Specify the list start using start

Define the list item position using value

Bonus: Control list styles via CSS

Related Topics

Related Articles

Specify the list start using `start`

Define the list item position using `value`