Is it possible to specify a starting number for an ordered list?

html

responsive-design

css-counters

list-item-numbers

byAlex Kataev·Aug 24, 2024

You can define the starting number of an ordered list using the start attribute:

<ol start="10">
  <li>This ain't a race, but I'm starting at 10!</li>
  <li>I'm 11 and I'm feeling fine!</li>
</ol>

This list starts the numbering at 10, not 1. Remember, "it's not about the destination, it's about the journey".

The 'start' attribute: Kickstarting your ordered lists

Get it started with 'start'

The start attribute is a practical and convenient tool in HTML5 for initiating the numbering of list items in an ordered list:

<ol start="100">
  <li>One fine century old item here!</li>
  <li>Add +1 and we're at 101!</li>
</ol>

In other words, it's like choosing your spot in the queue with a 💯 starting point.

The compatibility saga: HTML5 vs HTML 4.01

If start can't remember its past, it's doomed to repeat it! But thankfully, despite leaving start behind in HTML 4.01, HTML5 has embraced it again. Just be sure to declare <!DOCTYPE html> for HTML5 support:

<!DOCTYPE html>
<html>
<head>
<title>A memorable page</title>
</head>
<body>
<ol start="3">
  <li>Item Three reporting</li>
  <li>Four is more, right?</li>
  <li>Fifth time's a charm!</li>
</ol>
</body>
</html>

CSS: Stepping up the list game

When simple HTML attributes feel too.....simple, level up with CSS counters:

Use counter-reset on ol to set the starting point:

ol {
  counter-reset: list-counter 4; /* Start from 5, because why not? */
}

li {
  list-style-type: none; /* Who needs default styles, right? */
  counter-increment: list-counter; /* Let the counting begin... */
}

li:before {
  content: counter(list-counter) ". "; /* Punctuation is important! */
}

Tale as old as time, but your lists just got a Disney-level makeover with CSS counters!

Controlling list item numbers: Mastering the 'value' attribute

Sometimes you wish to control the numbers of individual list items. The value attribute becomes your magic wand:

<ol>
  <li>I'm no one...literally, the number 1!</li>
  <li value="5">I like to jump ahead to 5, can't help it!</li>
  <li>Back in line, I'm 6!</li>
</ol>

Now, '5' has jumped the queue, but the rest carried on like nothing happened.

Handling the challenges: A fundamental guide

Cross-browser compatibility: A necessary evil

With great power comes great responsibility, and that applies to cross-browser compatibility too! Test across different browsers to avoid terrible, horrible, no good, very bad display issues.

A nod to accessibility

Ensure that your fancy list numbering doesn't confuse assistive technologies or the order of your content while it's being narrated.

Enter JavaScript: Handling dynamic lists

In a world where lists grow and shrink dynamically, consider JavaScript to manipulate the start attribute or apply CSS counters, ensuring flexibility and consistency.

A treasure of practical examples

I contain multitudes in JSFiddle and In CodePen we trust - live demos exhibiting HTML and CSS strategies.
Keep it real with these practical examples. You're not just writing code, you're crafting experiences.

explain-codes / Html / Is it possible to specify a starting number for an ordered list?

Linked

How can you customize the numbers in an ordered list?



Using CSS to insert text



Cross-reference (named anchor) in markdown



Css :first-letter not working



Horizontal line and the right way to code it in HTML, CSS

