askvity

How do you create an ordered list in HTML?

Published in HTML Lists 2 mins read

To create an ordered list in HTML, you use the <ol> and <li> tags. The <ol> tag defines the ordered list itself, and the <li> tag defines each list item within the ordered list. By default, list items are numbered.

Understanding Ordered Lists in HTML

HTML ordered lists are used to display a list of items where the order is important. Unlike unordered lists that use bullets, ordered lists use numbers (by default) to indicate the sequence of items.

How to Create an Ordered List

Here's a breakdown of the elements required to create an ordered list:

  • <ol> tag: This tag signifies the beginning and end of the ordered list. The HTML ordered list starts with the <ol> tag and ends with the </ol> tag, according to reference material from 13-Oct-2024.
  • <li> tag: This tag represents each list item within the ordered list. The list items start with the <li> tag and end with </li> tag, according to reference material from 13-Oct-2024.

Example of an Ordered List

Here's an example of how to create a simple ordered list in HTML:

<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

This code will render the following output in a web browser:

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

Customizing Ordered Lists

While ordered lists default to using numbers, you can customize the numbering style using CSS or the type attribute in older HTML versions (though CSS is the preferred method for styling).

Practical Applications of Ordered Lists

Ordered lists are useful in various scenarios, including:

  • Step-by-step instructions: When providing instructions, an ordered list can clearly define the sequence of steps.
  • Ranked lists: Displaying top 10 lists or other ranked information.
  • Table of contents: Presenting a table of contents with numbered sections.

Summary Table

Tag Description
<ol> Defines the ordered list.
<li> Defines each list item within the ordered list.

Related Articles