Ordered list in HTML

An ordered list in HTML is used to present a list of items in a specific order. The items are typically marked with numbers, letters, or Roman numerals to indicate their sequence. This is useful for lists where the order matters, such as steps in a procedure or rankings.


Basic Syntax

The basic syntax for an ordered list is:

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


Simple Ordered List

<!DOCTYPE html>
<html>
<head>
  <title>Ordered List Example</title>
</head>
<body>

<h2>Steps to Bake a Cake</h2>
<ol>
  <li>Preheat the oven to 350°F (175°C).</li>
  <li>Mix the dry ingredients.</li>
  <li>Beat the eggs and sugar.</li>
  <li>Combine wet and dry ingredients.</li>
  <li>Pour the batter into a pan.</li>
  <li>Bake for 30-35 minutes.</li>
  <li>Let the cake cool.</li>
</ol>

</body>
</html>


Nested Ordered Lists

<!DOCTYPE html>
<html>
<head>
  <title>Nested Ordered List Example</title>
</head>
<body>

<h2>Outline for Research Paper</h2>
<ol>
  <li>Introduction
    <ol>
      <li>Background</li>
      <li>Thesis Statement</li>
    </ol>
  </li>
  <li>Body
    <ol>
      <li>Literature Review</li>
      <li>Methodology</li>
      <li>Results</li>
      <li>Discussion</li>
    </ol>
  </li>
  <li>Conclusion
    <ol>
      <li>Summary of Findings</li>
      <li>Future Research</li>
    </ol>
  </li>
</ol>

</body>
</html>


Styled Ordered List with CSS

<!DOCTYPE html>
<html>
<head>
  <title>Styled Ordered List Example</title>
  <style>
    ol {
      list-style-type: upper-roman; /* Changes numbering to uppercase Roman numerals */
      padding-left: 20px; /* Adds padding to the left of the list */
    }
    li {
      font-family: 'Times New Roman', Times, serif; /* Changes the font */
      color: #333; /* Changes the text color */
    }
  </style>
</head>
<body>

<h2>Top 5 Historical Figures</h2>
<ol>
  <li>Julius Caesar</li>
  <li>Alexander the Great</li>
  <li>Cleopatra</li>
  <li>Genghis Khan</li>
  <li>Napoleon Bonaparte</li>
</ol>

</body>
</html>

CSS is used to change the numbering to uppercase Roman numerals, add padding to the left of the list, and style the font and color of the list items.


 Custom Start Value and Type

<!DOCTYPE html>
<html>
<head>
  <title>Custom Ordered List Example</title>
</head>
<body>

<h2>Ranking of Movies</h2>
<ol start="5" type="A"> <!-- Starts the list at 5 and uses uppercase letters -->
  <li>The Shawshank Redemption</li>
  <li>The Godfather</li>
  <li>The Dark Knight</li>
  <li>12 Angry Men</li>
  <li>Schindler's List</li>
</ol>

</body>
</html>

the start attribute is used to begin the list at 5, and the type attribute is used to change the numbering to uppercase letters.


Different Types of Ordered Lists

<!DOCTYPE html>
<html>
<head>
  <title>Different Types of Ordered Lists</title>
</head>
<body>

<h2>Types of Ordered Lists</h2>
<h3>Default (Numbers)</h3>
<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

<h3>Alphabetical (Uppercase)</h3>
<ol type="A">
  <li>Item A</li>
  <li>Item B</li>
  <li>Item C</li>
</ol>

<h3>Alphabetical (Lowercase)</h3>
<ol type="a">
  <li>item a</li>
  <li>item b</li>
  <li>item c</li>
</ol>

<h3>Roman Numerals (Uppercase)</h3>
<ol type="I">
  <li>Item I</li>
  <li>Item II</li>
  <li>Item III</li>
</ol>

<h3>Roman Numerals (Lowercase)</h3>
<ol type="i">
  <li>item i</li>
  <li>item ii</li>
  <li>item iii</li>
</ol>

</body>
</html>

different types of ordered lists are demonstrated using the type attribute to show various numbering styles, including default numbers, alphabetical (uppercase and lowercase), and Roman numerals (uppercase and lowercase).