HTML Ordered Lists

HTML ordered lists use the

tag to present items in a defined sequence, ensuring clear and structured display of step-based or ranked content.
• Uses
  to create a list with a specific order or sequence.
  2. Each item is defined using the
  3. tag.
  3. Items are automatically numbered or lettered by the browser.
  4. Numbering style can be customized using attributes or CSS.
  5. Commonly used for instructions, steps, and rankings.
index.html

<html>
<head>
    <title>title>
head>
<body>
    <h2>My To-Do Listh2>


    <ol>
        <li>Go grocery shoppingli>
        <li>Pay utility billsli>
        <li>Prepare dinnerli>
    ol>


body>
html>

Syntax

    
Milks
    
Eggs
    
Breads
    
Butter

Different Type Attributes in HTML Ordered List

The type attribute of

tag specifies the order we want to create.
• 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. Numbered Ordered List

To create an ordered list in HTML with numerical markers, which is the default behavior for ordered lists, you simply use the

(ordered list) tag without specifying a type attribute.

Example: Implementation of a default ordered list where items are displayed in numeric sequence.

index.html

<html>
<head>
    <title>title>
head>
<body>
    <h2>Ordered List with Numbersh2>


    <ol>
        <li>JavaScriptli>
        <li>Pythonli>
        <li>Javali>
        <li>C++li>
        <li>C#li>
    ol>


body>
html>

2. Uppercase Letters Ordered List

To create an ordered list in HTML that uses uppercase letters for the list markers, you can use the type attribute on the

tag and set it to "A".

Example: Implementation of an ordered list using the type="A" attribute to display items in uppercase alphabetical order.

index.html

<html>
<head>
    <title>title>
head>
<body>
    <h2>Uppercase Letters Ordered Listh2>


    <ol type="A">
        <li>Appleli>
        <li>Bananali>
        <li>Cherryli>
        <li>Dateli>
    ol>


body>
html>

3. Lowercase Letters Ordered List

To create an ordered list in HTML that uses lowercase letters for the list markers, you can use the type attribute on the

tag and set it to "a".

Example: Implementation of an ordered list using the type="a" attribute to display items in lowercase alphabetical order.

index.html

<html>
<head>
    <title>title>
head>
<body>
    <h2>Lowercase Letters Ordered Listh2>


    <ol type="a">
        <li>RCBli>
        <li>CSKli>
        <li>DCli>
        <li>MIli>
    ol>


body>
html>

4. Uppercase Roman Numbers Ordered List

To create an ordered list in HTML with uppercase Roman numerals as the markers, you can use the type attribute on the

tag and set it to "I".

Example: Implementation of an ordered list using the type="I" attribute to display items in uppercase Roman numerals.

index.html

<html>
<head>
    <title>title>
head>
<body>
    <h2> Uppercase Roman Numbers Ordered List h2>


    <ol type="I">
        <li>First itemli>
        <li>Second itemli>
        <li>Third itemli>
        <li>Fourth itemli>
    ol>


body>
html>

5. Lowercase Roman Numbers Ordered List

To create an ordered list in HTML with lowercase Roman numerals as the markers, you can use the type attribute on the

tag and set it to "i".

Example: Implementation of an ordered list using the type="i" attribute to display items in lowercase Roman numerals.

index.html

<html>
<head>
  <title>title>
head>
<body>
  <h2>Lowercase Roman Numerals Ordered Listh2>


  <ol type="i">
    <li>First itemli>
    <li>Second itemli>
    <li>Third itemli>
    <li>Fourth itemli>
  ol>


body>
html>

6. Reverse Ordered List in HTML

To create a reverse-ordered list in HTML, you can use the 'reversed' attribute in the

tag. This will make the list count down from the highest number.

Example: Implementation of an ordered list using the reversed attribute to display items in descending order.

HTML

<html>
<head>
    <title>title>
head>
<body>
    <h1>Top 5 Movies to Watchh1>


    <ol reversed>
        <li>The Shawshank Redemptionli>
        <li>The Godfatherli>
        <li>Inceptionli>
        <li>Interstellarli>
        <li>Pulp Fictionli>
    ol>


body>
html>

7. Control List Counting

To control list counting, use the start attribute in the

tag to set the starting number for the ordered list.

Example: Showcase an ordered list starting from the number 5, controlled by the “start” attribute within the

tag, customizing list counting
index.html

<html>
<head>
    <title>title>
head>
<body>
    <h2>Control List Countingh2>


    <ol start="5">
        <li>Item 5li>
        <li>Item 6li>
        <li>Item 7li>
        <li>Item 8li>
    ol>


body>
html>

8. Nested Ordered Lists

Nested ordered lists use

inside
1. tags to create sublists, making content more organized.

   Example: Creating nested ordered list, listing programming languages with their respective frameworks as subitems

   index.html

   
   
   <html>
   <head>
       <title>title>
   head>
   <body>
       <h2>Nested Ordered Listh2>
   
   
       <ol>
           <li>
               JavaScript
               <ol>
                   <li>Reactli>
                   <li>Angularli>
                   <li>Vue.jsli>
               ol>
           li>
           <li>
               Python
               <ol>
                   <li>Djangoli>
                   <li>Flaskli>
                   <li>Pyramidli>
               ol>
           li>
       ol>
   
   
   body>
   html>