Be Grounded in Love
HTML

HTML Ordered Lists

By ampiaw
2

An HTML Ordered List is formed using the HTML tag, allowing elements to be presented in a sequential manner, either by numbers or letters. Each element in the list is enclosed in an `li` tag, which represents a “list item.”

The browser automatically numbers the items, but you can customize the numbering style with various attributes and CSS.

 

Example – Creating a Basic Ordered List

HTML

<html>
<head>
    <title>Simple Ordered List</title>
</head>
<body>
    <h2>My To-Do List</h2>
    <ol>
        <li>Go grocery shopping</li>
        <li>Pay utility bills</li>
        <li>Prepare dinner</li>
    </ol>
</body>
</html>

 

My To-Do List

  1. Go grocery shopping

  2. Pay utility bills

  3. Prepare dinner

 

HTML Ordered Lists – Type Attribute

The type attribute of the tag indicates the sequence we wish to establish.

Type Descriptions
type=”1″ This will list the items with numbers (default)
type=”A” This will list the items in uppercase letters.
type=”a” This will list the items in lowercase letters.
type=”I” This will list the items with uppercase Roman numbers.
type=”i” This will list the items with lowercase Roman numbers.

1. Number – Ordered List

To generate a numbered list in HTML, which is the standard function for ordered lists, you can simply utilize the ordered list tag without needing to define a type attribute.

Example:

HTML

<html>

<head>
    <title>Numbered List Example</title>
</head>

<body>
    <h2>Ordered List with Numbers</h2>
    <ol>
        <li>JavaScript</li>
        <li>Python</li>
        <li>Java</li>
        <li>C++</li>
        <li>C#</li>
    </ol>
</body>

</html>

Result

Ordered List with Numbers

  1. JavaScript
  2. Python
  3. Java
  4. C++
  5. C#

 

2. Uppercase Letters – Ordered List

To create an ordered list in HTML that displays list markers in uppercase letters, you can utilize the type attribute in the tag and assign it the desired value. “A”

      1. .

Example:

HTML

<html>

<head>
    <title>
        Uppercase Letters Ordered List
    </title>
</head>

<body>
    <h2>Uppercase Letters Ordered List</h2>
    <ol type="A">
        <li>Apple</li>
        <li>Banana</li>
        <li>Cherry</li>
        <li>Date</li>
    </ol>
</body>

</html>

Result

Uppercase Letters Ordered List

  1. Apple
  2. Banana
  3. Cherry
  4. Date

 

3. Lowercase Letters – Ordered List

To generate an ordered list in HTML with lowercase letters as the markers, you can utilize the type attribute within the tag and assign it the value of  "a"

        1. .

Example:

HTML

<html>

<head>
    <title>
        Lowercase Letters Ordered List
    </title>
</head>

<body>
    <h2>Lowercase Letters Ordered List</h2>
    <ol type="a">
        <li>RCB</li>
        <li>CSK</li>
        <li>DC</li>
        <li>MI</li>
    </ol>
</body>

</html>

 

4. Uppercase Roman Numbers – Ordered List

To create an ordered list in HTML that uses uppercase Roman numerals as markers, you can apply the type attribute to the tag and assign it the value “I”.

Example:

HTML

<html>

<head>
    <title>
        Uppercase Roman Numbers Ordered List
    </title>
</head>

<body>
    <h2>
        Uppercase Roman Numbers Ordered List
    </h2>
    <ol type="I">
        <li>First item</li>
        <li>Second item</li>
        <li>Third item</li>
        <li>Fourth item</li>
    </ol>
</body>

</html>

 

5. Lowercase Roman Numbers – Ordered List

To create an ordered list in HTML that uses lowercase Roman numerals as markers, utilize the type attribute in the tag and specify it as “i”.

Example:

HTML

<html>

<head>
    <title>
        Lowercase Roman Numbers Ordered List
    </title>
</head>

<body>
    <h2>
        Lowercase Roman Numbers Ordered List
    </h2>
    <ol type="i">
        <li>First item</li>
        <li>Second item</li>
        <li>Third item</li>
        <li>Fourth item</li>
    </ol>
</body>

</html>

 

Reverse Ordered List in HTML

To generate a list in reverse order using HTML, you can apply the ‘reversed’ attribute to the tag. This will allow the list to count down from the highest number.

Example:

HTML

<html>
<head>
    <title>Reverse Ordered List</title>
</head>
<body>
    <h1>Top 5 Movies to Watch</h1>
    <ol reversed>
        <li>The Shawshank Redemption</li>
        <li>The Godfather</li>
        <li>Inception</li>
        <li>Interstellar</li>
        <li>Pulp Fiction</li>
    </ol>
</body>
</html>

Result

Top 5 Movies to Watch

  1. The Shawshank Redemption
  2. The Godfather
  3. Inception
  4. Interstellar
  5. Pulp Fiction

 Control List Counting

To manage the numbering of a list, utilize the ‘start’ attribute within the tag to establish the initial number for the ordered list.

Example: In this example, we demonstrate an ordered list beginning with the number 5, utilizing the “start” attribute in the tag to customize the counting of the list.

HTML

<html>

<head>
    <title>Control List Counting</title>
</head>

<body>
    <h2>Control List Counting</h2>
    <ol start="5">
        <li>Item 5</li>
        <li>Item 6</li>
        <li>Item 7</li>
        <li>Item 8</li>
    </ol>
</body>

</html>

 

Nested Ordered Lists

Nested ordered lists utilize inner tags to form sublists, enhancing the organization of content.

For instance, in this example, we are generating a nested ordered list that enumerates programming languages along with their corresponding frameworks as sub-items.

HTML

<html>

<head>
    <title>Nested Ordered List</title>
</head>

<body>
    <h2>Nested Ordered List</h2>
    <ol>
        <li>
            JavaScript
            <ol>
                <li>React</li>
                <li>Angular</li>
                <li>Vue.js</li>
            </ol>
        </li>
        <li>
            Python
            <ol>
                <li>Django</li>
                <li>Flask</li>
                <li>Pyramid</li>
            </ol>
        </li>
    </ol>
</body>

</html>

Result

Nested Ordered List

  1. JavaScript
    1. React
    2. Angular
    3. Vue.js
  2. Python
    1. Django
    2. Flask
    3. Pyramid

 

HTML Ordered Lists – FAQs

What is an HTML ordered list?

An HTML ordered list is a list of items that are displayed in a specific sequence, each item numbered automatically.

How to create an ordered list in HTML?

Use the

    tag with nested
  • (list item) tags to create an ordered list.

What does the

    tag represent?

The

    tag represents an ordered list, which typically displays items with numbers or letters.

How to specify the type of numbering in an ordered list?

Use the ‘type’ attribute in the

    tag to specify the numbering type (e.g., 1, A, a, I, i).

How to start an ordered list with a specific number?

Use the ‘start’ attribute in the

    tag to set the starting number. Example:

What is the reversed attribute used for in an ordered list?

The ‘reversed’ attribute reverses the order of the list, making it count down instead of up.

 

ampiaw 119 posts 1 comments
You might also like More from author
2 Comments
  1. HTML Tutorial - Sampson Rockefellar Ampiaw

    […] Ordered lists in HTML […]

    1. ampiaw says

      Thank you for your comment, Sampson! If you have any specific questions or points you’d like to discuss about ordered lists in HTML, feel free to share!

Leave A Reply

Books