Ordered Lists

The <ol> element is used to create an ordered list, where each list item is marked with a number or letter. The order of the items is significant, and the numbering is done automatically by the browser. This element is useful when the order of the items is important and needs to be presented in a specific sequence.

<!DOCTYPE html>
<html>

<head>
    <title>HTML Ordered List</title>
</head>

<body>
    <h2>Fruits list</h2>
    <ol>
        <li>Apple</li>
        <li>Banana</li>
        <li>Guava</li>
        <li>Papaya</li>
        <li>Pineapple</li>
        <li>Watermelon</li>
    </ol>
</body>

</html>

OUTPUT:

We have an attribute called type attribute by using this we can specify the type of numbering you like.

list types
<ol type = "1"> - Default-Case Numerals.
<ol type = "I"> - Upper-Case Numerals.
<ol type = "i"> - Lower-Case Numerals.
<ol type = "A"> - Upper-Case Letters.
<ol type = "a"> - Lower-Case Letters.

Example:

<!DOCTYPE html>
<html>

<head>
    <title>HTML Ordered List</title>
</head>

<body>
    <h2>Fruits list</h2>
    <ol type = "I">
        <li>Apple</li>
        <li>Banana</li>
        <li>Guava</li>
        <li>Papaya</li>
        <li>Pineapple</li>
        <li>Watermelon</li>
    </ol>
</body>

</html>

OUTPUT:

Order list vs Unorder list vs Definition list

The main difference between ordered lists, unordered lists, and definition lists is the way they display the list items and the purpose they serve in structuring the content.

  • Ordered list: The <ol> element is used to create an ordered list, where each list item is marked with a number or letter. The order of the items is significant, and the numbering is done automatically by the browser. This element is useful when the order of the items is important and needs to be presented in a specific sequence.
  • Unordered list: The <ul> element is used to create an unordered list, where each list item is marked with a bullet. The order of the items is not significant, and the items are typically presented in no particular order. This element is useful when the order of the items is not important and the items need to be presented in a simple and easy-to-read format.
  • Definition list: The <dl> element is used to create a definition list, where terms and their corresponding definitions are grouped together. The <dt> element is used to define the term, and the <dd> element is used to describe the term. This element is useful when the items need to be presented in a format that clearly defines the relationship between the term and its definition.

All the above lists are semantic elements, which provide meaning to the structure of the content. They make it easier for search engines and assistive technologies to understand the purpose of the content, making it easier for users to find and navigate the information they need.

ordered list
  1. The <ol> element is used to create an ordered list, where each list item is marked with a number or letter.
  2. Type attribute used to specify the type of numbering you like.