# How to create HTML ordered lists with the tag

Unlike unordered lists, which are organised with bullet points, HTML’s ordered lists are arranged in sequential order using numbers or letters. Ordered lists in HTML start with the `<ol>` tag and end with `</ol>`. These type of lists make it easy to quickly grasp information, adding structure and clarity to the design of websites.

## What is an ordered list in HTML?

An ordered list in [HTML](https://www.ionos.co.uk/digitalguide/websites/web-development/what-is-html/) is a structured, numbered list. This type of list is created using HTML’s &lt;ol&gt; tag, with each individual item wrapped in `<li>` (list item) tags. Ordered lists are numbered with ascending Arabic numerals (1,2,3…) by default, but they can also be customised to use letters or Roman numerals instead.

Ordered HTML lists follow a **defined, logical sequence**. Unlike unordered lists, items in this type of list should adhere to a specific, organised arrangement. This type of list is perfect for instructions or any type of content that requires a sequential order.

Tip Ordered lists are just one type of [list in HTML](https://www.ionos.co.uk/digitalguide/websites/web-development/html-lists/). [HTML’s unordered lists](https://www.ionos.co.uk/digitalguide/websites/web-development/html-unordered-lists/) offer users a way to list items without prescribing an order to them. A third type of list also exists: definition lists (or description list). These can be used to pair terms with descriptions/definitions.

## Why are ordered lists important for SEO?

Well-structured HTML documents are essential for both search engine optimisation (SEO) and website accessibility. In addition to keywords, content quality and [HTML meta tags](https://www.ionos.co.uk/digitalguide/websites/web-development/html-meta-tags/), structuring texts in a **logical and organised manner** aids search engines in understanding and evaluating your site. Along with other elements like headings, subheadings and bold text, HTML ordered lists play an important role in improving the design of your site.

## When should you use ordered lists in HTML?

HTML’s ordered lists are especially useful when items should be arranged in a certain way. Here are some examples of when using this type of list can be beneficial:

- Step-by-step instructions (e.g., recipes) or tutorials
- Ranking lists (e.g., Top 10 lists)
- Processes or workflows that need to follow a specific order

## What syntax does HTML use for ordered lists?

To **create an ordered list in HTML**, you need to use the following [HTML tags](https://www.ionos.co.uk/digitalguide/websites/web-development/html-tags/):

- `<ol>`: Marks the beginning of an ordered list
- `</ol>`: Marks the end of the list
- `<li>`: Begins each list item
- `</li>`: Ends each list item

Here’s a simple example of an ordered list:

```html
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>Fourth item</li>
<li>…</li>
</ol>
```

By default, most browsers display the list with **Arabic numerals (1, 2, 3…) in ascending order**.

## How to change the numbering style of an ordered list

If you want to change the starting value or the type of numbering used in your list, there are special [HTML attributes](https://www.ionos.co.uk/digitalguide/websites/web-development/html-attributes/) you can use to do so. With these attributes, you can decide whether **numbers or letters** should be used, designate a **different starting value** or **reverse the order** in which items are listed.

### Specify the type of numbers/letters to use with `type`

You can use **numbers** (Arabic or Roman numerals) or **letters** (uppercase or lowercase) to create ordered lists in HTML. You can choose which style to use by adding the `type` attribute to the `<ol>` tag:

```html
<ol type="X">
<li>First item</li>
<li>Second item</li>
<li>...</li>
</ol>
```

Replace the `X` with the type of numbering you want to use:

- `type=1`: Ascending Arabic numerals (1, 2, 3…). If no type is specified, HTML defaults to this.
- `type=A`: Uppercase letters (A, B, C…)
- `type=a`: Lowercase letters (a,b, c…)
- `type=i` / `type=I`: Roman numerals, either lowercase (i, ii, iii…) or uppercase (I, II, III…)

### Set a custom starting value with the `start` attribute

If you want your list to start with a number or letter other than ‘1’ or ‘A’, you can designate **your own starting value** using the `start` attribute:

```html
<ol start="X">
<li>First item</li>
<li>Second item</li>
<li>...</li>
</ol>
```

Replace `X` with the value you want the list to start with. For example, here’s what the code would look like if you wanted to start a list with the number 5:

```html
<ol start="5">
<li>First item</li>
<li>Second item</li>
<li>...</li>
</ol>
```

### Reverse the order with `reversed`

If you want a list that **counts down** instead of up, you can use the `reversed` attribute. Here’s the syntax:

```html
<ol start="1" reversed>
<li>First item</li>
<li>Second item</li>
<li>...</li>
</ol>
```

With this setup, the list will count backwards, starting from the highest value.

Tip Want to learn more about HTML? Check out our [HTML tutorial for beginners](https://www.ionos.co.uk/digitalguide/websites/web-development/learning-html-a-beginners-tutorial/) to learn the essentials.


This is a markdown version of: [https://www.ionos.co.uk/digitalguide/websites/web-development/html-ordered-lists/](https://www.ionos.co.uk/digitalguide/websites/web-development/html-ordered-lists/) for AI/LLM consumption.