How to make a numbered list in HTML start with a specific number

If you work with HTML, sooner or later you're going to need lists. And not just for listing things: sometimes you have to start a numbered list from a specific valueYou can change the numbering style, reverse the order, or even customize the bullet points with CSS. It may seem like a small thing, but it's one of those layout and semantic tasks that's good to have mastered.

In the following lines, you'll see clearly and directly how lists work in HTML (ordered, unordered, and description lists), what attributes and properties are available, and how to use them effectively. We've also included... Practical examples with CSS start, value, reversed and counters to cover the most common and the least obvious use cases.

What exactly is a list in HTML and why does it matter?

HTML offers three types of lists: ordered ( ), disordered ( ) and description ( If you work with other tools, you can also check how add lists in PowerPointChoosing the right one isn't just a matter of aesthetics; it affects the semantics of the document and how users understand it. SEO And assistive technologies understand the content. In an ordered list there is an implicit order; in an unordered one, that order does not exist; in a descriptive list, a map is created. term ( ) with its definition ( ).

By default, browsers apply certain styles: and They have vertical margin and padding-left, It usually shifts its content to the right, and the They don't have their own margins. These values ​​influence alignment and spacing, so it's common to adjust them with CSS to maintain a consistent vertical rhythm with the rest of the page.

Ordered lists ( ): basic structure and numbering

An ordered list is created with … and elements inside. By default, the numbering is 1, 2, 3… and so on. If you prefer, you can choose letters (A, B, C) or Roman numerals (I, II, III) using the type attribute.

Attribute type It accepts several values: "1" (decimal), "a" (lowercase alphabetic), "A" (uppercase alphabetic), "i" (lowercase Roman), and "I" (uppercase Roman). This applies to the entire list and is a quick way to define the numbering system without using CSS.

<ol type="A">
  <li>Primer paso</li>
  <li>Segundo paso</li>
  <li>Tercer paso</li>
</ol>

In the previous example, each element will be preceded by A, B, Cand so on. Remember that the numbering is purely representational: the order is dictated by the in the HTML, not the number displayed on the screen.

Start the list from a specific number: start and value

There are two native approaches to controlling the starting point of a numbered list: start in y value in. start sets the first value of the sequence; value allows you to assign a specific number to an individual element, restarting the progression from there.

If you need the list Boot in 30, use start="30"If you only want to alter a specific element (for example, jump to 65 in the middle of the list), use value="65" in that Both attributes returned with HTML5 after being deprecated in HTML 4.01 strict, so today They are valid and very useful.

<!-- Arrancar en 30 -->
<ol start="30">
  <li>Treinta</li>
  <li>Treinta y uno</li>
  <li>Treinta y dos</li>
</ol>

<!-- Saltar a 65 en el segundo elemento -->
<ol>
  <li>Primero</li>
  <li value="65">Segundo</li>
  <li>Tercero</li>
</ol>

A clear advantage of these attributes is that the numbering continues to work even if the CSS fails, ensuring a robust experience in older browsers or environments with styles disabled.

Reverse numbering: the reversed attribute

When you want to count backwards, HTML5 incorporates the attribute reversed in With it, the list is numbered from highest to lowest without the need for additional hacks. You can leave it as a boolean or with a "reversed" value; Both methods work in modern browsers.

<ol reversed>
  <li>Elemento A</li>
  <li>Elemento B</li>
  <li>Elemento C</li>
</ol>

This pattern is very practical for rankings, timelines that go from newest to oldest, or lists where descending order makes sense. It's a semantic attribute, so clearly communicates the intention from the author of the document.

Customizing numbering with CSS: counters and ::before

If you prefer total control over the appearance, you can replace the native markers with CSS counters and generate the numbered "bullet" with ::before. This method allows for more complex fonts, backgrounds, sizes, and formats than standard numbering.

The basic idea is to reset a counter in the , increase in each and paint the value with content: counter(item)At the same time, you disable the browser bullet pointer with list-style:none to avoid duplicating bookmarks.

ol { counter-reset: item; }
ol li { list-style: none; padding: 4px 8px; }
ol li::before {
  content: counter(item) ". ";
  counter-increment: item;
  display: inline-block;
  background: #323232;
  color: #fbfbfb;
  font: bold 16px Arial, Verdana;
  padding: 0 4px;
  margin: 0 6px 0 0;
}

This approach is powerful, but it has one important detail: CSS counters do not "know" start or valueIn other words, if you start at 45 in the HTML, the counter will continue counting from 1 unless you manually adjust it with counter-reset.

To synchronize the counter with the desired value, you can reset it online by subtracting one from the starting number. For example, if the third It should be 45, you apply counter-reset: item 44; to the element itself or to the corresponding.

<ol>
  <li>Primer ítem</li>
  <li>Segundo ítem</li>
  <li value="45" style="counter-reset: item 44;">Tercer ítem</li>
  <li>Cuarto ítem</li>
</ol>

It works, yes, but it's a compromise solutionThis forces you to duplicate the logic (HTML and CSS) and complicates maintenance. If you don't need a very specific number style, it's usually preferable to delegate numbering to the browser and work with it. list-style-type for the basic aspect.

As a historical curiosity, some people added IE6/IE7 compatibility by leaving `list-style:decimal` with a legacy hack asterisk and generating the appearance with `::before`. These days, unless you have an extremely legacy case, you don't need to. hacks for such old browsers.

Unordered lists ( ): vignettes and personalization

An unordered list defines related elements without ordinal hierarchy and is conceptually similar to lists in other applications, such as drop down lists in ExcelBy default it appears with a "disc" dot, but you can change its bullet point with list-style-type: none (no bullet), disc (filled), circle (hollow) or square (square).

<ul style="list-style-type: square;">
  <li>Elemento uno</li>
  <li>Elemento dos</li>
  <li>Elemento tres</li>
</ul>

Furthermore, you control where the panel is painted with list-style-position: outside (by default, outside the box of the ) or inside (the bullet point remains inside the block, aligned with the text). This affects alignment and multi-line behavior.

ul { list-style-position: inside; }

If you want a custom image, there is list-style-imageAlthough its control is limited, it's more flexible to use background properties (background-image, background-position, background-size, no-repeat) over the with enough padding so that the image does not overlap the text.

ul.custom { list-style: none; padding-left: 20px; }
ul.custom li {
  background-image: url("/ruta/a/tu-vineta.svg");
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 16px 16px;
  padding-left: 24px;
}

You can also use the abbreviated property list-style To group type, image, and position into a single declaration (for example, list-style: square inside;). If you include both image and type, the type acts as a "plan B" if the image fails to load.

Description lists ( ): terms and definitions

Description lists are used to associate term-definition pairs, like a glossary or a restaurant menu. They are structured with (list), (term) y (definition)By default, the browser applies a margin to to move it with respect to the term.

<dl>
  <dt>Pizpireta</dt>
  <dd>Dicho de una mujer: Viva, pronta y aguda.</dd>
  <dt>Pulular</dt>
  <dd>Abundar y bullir en un lugar.</dd>
</dl>

If you prefer a different look, adjust margins and typography with CSS. At a semantic level, when you actually represent Terms and definitions, That's the correct label; if you just want a visual list, either With CSS, the options can be simpler.

Default browser behavior (spacing and typography)

User agent styles typically apply to and a margin-top/bottom of ~1em and padding-left of ~40pxwhile inherits similar margins and Add margin-left. To integrate lists with paragraphs and headings, it's advisable to match sizes and line-height in a coherent manner.

html { font-size: 62.5%; } /* 1rem = 10px aproximado */
body { font-family: system-ui, sans-serif; }
p, ul, ol, dl { font-size: 1.6rem; margin: 1.6rem 0; }
li, dd { line-height: 1.6; }
dt { font-weight: 700; }

With these adjustments, the blocks maintain a stable vertical rhythm, preventing some lists from appearing "closer together" or "looser" than the rest of the content. It's a subtle detail, but makes a difference in reading.

Nested lists and best practices

It is perfectly valid to nest lists within elements Regardless of the type. The important thing is that each sublist is correctly wrapped in its parent element and that you don't forget place the within the nested listThere is no practical limit to the number of levels, but for readability it is best not to exceed them.

<ul>
  <li>Carnívoro
    <ul>
      <li>León</li>
      <li>Buitre</li>
    </ul>
  </li>
  <li>Herbívoro
    <ul>
      <li>Vaca</li>
      <li>Cabra</li>
    </ul>
  </li>
</ul>

When you nest ordered lists, you can change the type in the sublist to avoid visual confusion (For example, numbers at level 1 and letters at level 2). If you use CSS counters, remember that each list can reset its own counter to avoid mixing sequences.

Links within lists and a sample navigation menu

It's common to convert an unordered list into a navigation. Each It contains a bullet point , and with CSS you remove the bullet and align the elements. With flexbox, the result is modern and accessible without complications, while maintaining a clean semantics.

<nav>
  <span class="logo">Logo</span>
  <ul class="menu">
    <li><a href="#/home">Inicio</a></li>
    <li><a href="#/products">Productos</a></li>
    <li><a href="#/about">Sobre nosotros</a></li>
  </ul>
</nav>

nav { background: #273032; color: #fff; padding: 10px; display: flex; gap: 16px; align-items: center; }
.menu { list-style: none; margin: 0; padding: 0; display: flex; gap: .8rem; }
.menu > li { margin: 0; }
.menu a { color: #ffc0cb; text-decoration: none; }

This pattern takes advantage of the fact that a list is, conceptually, a group of related links. Removing the bullet points and arranging them inline with flex makes navigation easier. predictable and adaptable to different screen sizes.

Shorthand CSS for lists and bullet options

The abbreviated property list-style It lets you define the type, position, and image of the bullet point in a single line, in any order you like. For example: list-style: square inside; or list-style: none; if you're creating a custom bullet point with a background or ::before.

/* Equivalentes */
ol { list-style-type: upper-roman; list-style-position: outside; list-style-image: none; }
ol { list-style: upper-roman outside; }

Remember that if you include both image and type, the type serves as backup alternative in case the image fails to load. This provides resilience and maintains legibility in less than ideal situations.

Compatibility, HTML4.01 vs HTML5 and recommendations

During one stage, start and type in and value in were considered obsolete (HTML 4.01 strict). These return in HTML5 and, to this day, their use is correct and well-supported by modern browsers. If you are working with very old documents, check the DOCTYPE and adjust it according to the context.

To stylize the panels, CSS is preferable compared to HTML attributes when the goal is purely visual. But if you need a list to start with a specific number or count down, semantic attributes (start, reversed, value) are the clearest and most robust option, leaving the fine formatting to CSS.

Practical examples for starting a list at a specific number

Imagine a pagination divided into distinct sections on the same page. You can use start to continue the numbering where the previous block left off, or apply value to the first element of the second block to maintain logical continuity without complicating things in the back-end.

<ol start="11">
  <li>Artículo 11</li>
  <li>Artículo 12</li>
  <li>Artículo 13</li>
</ol>

In editorial listings, tables of contents, or rankings, starting with a high number reinforces the context ("second part," "top 50–26"). With `reversed` you can create a descending top list without reordering the HTML, and with `value` introduce jumps when the logic of the document requires it.

When to use CSS counters and how to avoid surprises

Using CSS counters makes sense when you need decorate the marker with styles that native numbering doesn't offer: backgrounds, borders, special fonts, mixed formats. Also, when you want non-standard numbering combined with other decorations.

However, remember that if you mix start/value with CSS counters you will have to manually synchronize the counter-resetIt's easy to forget to subtract a unit or leave an inline rule in the HTML. If your priority is semantics and robustness, rely on native numbering and limit counters to cases where aesthetics truly justify them.

An intermediate strategy is not to suppress the native panel, but to visually hide it and use ::marker or ::before to reinforce the style. Even so, consistency between the actual marker and the "decorative marker" requires careful consideration. do not duplicate information to screen readers.

Accessibility and semantics of lists

The listings help assistive technologies advertise the number of elements and the role of each. Avoid creating "fake" lists using only line breaks or separators; and don't use lists for things that aren't lists (for example, formatting columns). For glossaries and term-definition pairs, communicates the relationship in a way more precise that a generic list with .

If you change the visual order with CSS (for example, inverting or reordering), make sure the order in the DOM follows a logical flow. And when you create menus with , keep clear links, visible focus and appropriate roles if you decide to add ARIA (without overdoing it).

To start a numbered list at a specific number: use start in; to set specific jumps: value in To count backward: reversed. If you want letters or Roman numerals: type. For bullet points of and Customized: list-style-type, and if you need images, even better background-* with paddingAnd when you're looking for sophisticated "design" numbering, consider CSS counters, knowing that they don't "read" start/value.

Lists may seem simple, but they are a fundamental part of layout design. With these resources, you can adapt them to almost any scenario without losing semantics, accessibility and visual control.