How to create HTML ordered lists with the tag

Unlike unordered lists, which are organized 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 is a structured, numbered list. This type of list is created using HTML’s <ol> 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 customized 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, organized arrangement. This type of list is perfect for instructions or any type of content that requires a sequential order.

Why are ordered lists important for SEO?

Well-structured HTML documents are essential for both search engine optimization (SEO) and website accessibility. In addition to keywords, content quality and HTML meta tags, structuring texts in a logical and organized 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:

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

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

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

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

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

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