HTML <ol> Tag

The HTML <ol> tag is used to create ordered lists, where each list item is numbered in a specific order. Ordered lists are useful when the sequence of items is important, such as in instructions, rankings, or steps in a process. The <ol> tag works in conjunction with the <li> (list item) tag to define each item in the list. By default, the list items are numbered sequentially, but you can customize the numbering style using attributes.

Syntax of the <ol> Tag

html
<ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ol>
  • <ol>: This tag defines an ordered list.
  • <li>: Each list item is wrapped inside the <li> tag and represents a single entry in the list.

By default, the items are numbered with Arabic numerals (1, 2, 3, etc.), but you can modify this using the attributes of the <ol> tag.

Attributes of the <ol> Tag

The <ol> tag supports several attributes that control the numbering and style of the list. Here are some common attributes:

AttributeDescription
typeSpecifies the numbering type for the list. Values include 1 (default), A,a, I, i (for different numbering formats).
startDefines the starting value of the list. For example, setting start = “5” begins the list at 5.
reversedReverses the numbering of the list, starting from a higher number and counting backward.

Examples of HTML <ol> Tag

Example 1: Basic Ordered List

html
<!DOCTYPE html>
<html>
<head>
    <title>Basic Ordered List</title>
</head>
<body>
    <h2>Steps to Make a Cup of Tea</h2>
    <ol>
        <li>Boil water</li>
        <li>Add tea leaves</li>
        <li>Let it steep</li>
        <li>Pour into a cup</li>
        <li>Add sugar and milk</li>
    </ol>
</body>
</html>

In this example, the list items are displayed with default numbering (1, 2, 3, etc.). The steps to make tea are presented in the correct sequence.

Example 2: Customized Ordered List with Roman Numerals

html
<!DOCTYPE html>
<html>
<head>
    <title>Custom Ordered List</title>
</head>
<body>
    <h2>Roman Numeral List</h2>
    <ol type="I" start="4">
        <li>First Item</li>
        <li>Second Item</li>
        <li>Third Item</li>
    </ol>
</body>
</html>

In this example, the ordered list uses Roman numerals (I, II, III) and starts numbering from IV (4), thanks to the type ="I" and start = “4” attributes.

FAQs About HTML <ol> Tag

Q1: What is the purpose of the HTML <ol> tag?
A: The <ol> tag is used to create ordered (numbered) lists in HTML, where the sequence of items matters.

Q2: Can I customize the numbering format of an ordered list?
A: Yes, you can customize the numbering format using the type attribute. Options include Arabic numerals (1), uppercase/lowercase letters (A,a), and Roman numerals (I,i).

Q3: What is the difference between <ol> and <ul> tags?
A: The <ol> tag creates an ordered list with numbered items, while the <ul> tag creates an unordered list with bullet points.

Q4: How do I start an ordered list at a number other than 1?
A: You can use the start attribute to define the starting number of the list. For example, <ol start ="3"> will start the list from 3.

Q5: Can I reverse the order of an HTML <ol> list?
A: Yes, by adding the reserved attribute, you can reverse the numbering, starting from the highest number and counting backward.

tools

HTML

Related Articles