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 se­quen­tial 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 in­for­ma­tion, adding structure and clarity to the design of websites.

What is an ordered list in HTML?

An ordered list in HTML is a struc­tured, numbered list. This type of list is created using HTML’s <ol> tag, with each in­di­vid­ual 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 cus­tomized 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 arrange­ment. This type of list is perfect for in­struc­tions or any type of content that requires a se­quen­tial order.

Why are ordered lists important for SEO?

Well-struc­tured HTML documents are essential for both search engine op­ti­miza­tion (SEO) and website ac­ces­si­bil­i­ty. In addition to keywords, content quality and HTML meta tags, struc­tur­ing texts in a logical and organized manner aids search engines in un­der­stand­ing and eval­u­at­ing your site. Along with other elements like headings, sub­head­ings 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 es­pe­cial­ly useful when items should be arranged in a certain way. Here are some examples of when using this type of list can be ben­e­fi­cial:

• Step-by-step in­struc­tions (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 at­trib­ut­es you can use to do so. With these at­trib­ut­es, 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.