List Styles:

Ordered lists in HTML

Summary

Ordered lists (<ol>) in HTML display items in a sequence using different numbering styles. The type attribute allows customization, including numbers, letters, and Roman numerals in upper and lower case.

Published:

2025-02-20

Updated:

2025-02-25

Reading time:

01:39

Author:

Jonas Jared Jacek

Tags:

web development, html

License:

CC BY-SA 4.0

Permalink:

HTML ordered lists

Introduction #

Ordered lists (<ol>) are used in Hypertext Markup Language (HTML) to display items in a specific sequence. They are particularly useful when order matters, such as in step-by-step instructions or ranked lists.

For unordered lists, see the article on unordered lists (<ul>) in HTML.

This article will focus on ordered lists and explores how to style the list item (<li>) using different types.

List of ordered list types #

The type attribute of the <ol> element allows you to specify different numbering styles for ordered lists.

These are the available types:

• 1 - Default numeric (1, 2, 3, …)
• A - Uppercase letters (A, B, C, …)
• a - Lowercase letters (a, b, c, …)
• I - Uppercase Roman numerals (I, II, III, …)
• i - Lowercase Roman numerals (i, ii, iii, …)

1 type (default numeric) #

The default type is numeric (list-style: decimal;), displaying items as numbers.

<ol type="1">
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

The list will be rendered as:

1. First item
2. Second item
3. Third item

A type (uppercase letters) #

This type uses uppercase letters (list-style: upper-latin;) for the list items.

<ol type="A">
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

The list will be rendered as:

1. First item
2. Second item
3. Third item

a type (lowercase letters) #

This type uses lowercase letters (list-style: lower-latin;) for the list items.

<ol type="a">
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

The list will be rendered as:

1. First item
2. Second item
3. Third item

I type (uppercase Roman numerals) #

This type uses uppercase Roman numerals for the list items.

<ol type="I">
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

The list will be rendered as:

1. First item
2. Second item
3. Third item

i type (lowercase Roman numerals) #

This type uses lowercase Roman numerals for the list items.

<ol type="i">
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

The list will be rendered as:

1. First item
2. Second item
3. Third item

Further readings #

Sources and recommended, further resources on the topic:

• WHATWG: ol element
• WHATWG: li element
• W3C: Accessibility - Using ol, ul and dl for lists or groups of links
• Setting the HTML ordered list (<ol>) start value
• unordered lists in HTML

Author

Jonas Jared Jacek (J15k)

Jonas works as project manager, web designer, and web developer since 2001. On top of that, he is a Linux system administrator with a broad interest in things related to programming, architecture, and design. See: https://www.j15k.com/

<p xmlns:cc="http://creativecommons.org/ns#" xmlns:dct="http://purl.org/dc/terms/"><a property="dct:title" rel="cc:attributionURL" href="https://www.ditig.com/ordered-lists-in-html">Ordered lists in HTML</a> by <a rel="cc:attributionURL dct:creator" property="cc:attributionName" href="https://www.j15k.com/">Jonas Jared Jacek</a> is licensed under <a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank" rel="license noopener noreferrer">CC BY-SA 4.0</a>.</p>