0
0
HTMLmarkup~5 mins

Ordered lists in HTML

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Ordered lists help show items in a specific order. They make steps or rankings clear.

When you want to show a recipe with steps to follow.
When listing instructions in the order they should be done.
When showing a top 5 ranking of favorite movies.
When numbering questions in a quiz.
When displaying a timeline of events.
Syntax
HTML
<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

The <ol> tag creates the ordered list container.

Each item inside uses the <li> tag.

Examples
A simple ordered list showing morning routine steps.
HTML
<ol>
  <li>Wake up</li>
  <li>Brush teeth</li>
  <li>Eat breakfast</li>
</ol>
Ordered list with uppercase letters instead of numbers.
HTML
<ol type="A">
  <li>Apple</li>
  <li>Banana</li>
  <li>Cherry</li>
</ol>
Ordered list starting numbering from 5.
HTML
<ol start="5">
  <li>Step five</li>
  <li>Step six</li>
</ol>
Ordered list counting down instead of up.
HTML
<ol reversed>
  <li>Last item</li>
  <li>Second last item</li>
</ol>
Sample Program

This page shows an ordered list of morning routine steps. The list is numbered automatically by the browser.

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Morning Routine</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 1rem;
      background-color: #f9f9f9;
      color: #333;
    }
    ol {
      background-color: #fff;
      padding: 1rem 2rem;
      border-radius: 0.5rem;
      max-width: 300px;
      box-shadow: 0 0 5px rgba(0,0,0,0.1);
    }
    li {
      margin-bottom: 0.5rem;
    }
  </style>
</head>
<body>
  <main>
    <h1>My Morning Routine</h1>
    <ol>
      <li>Wake up</li>
      <li>Brush teeth</li>
      <li>Eat breakfast</li>
      <li>Get dressed</li>
      <li>Leave for work</li>
    </ol>
  </main>
</body>
</html>
OutputSuccess
Important Notes

Ordered lists automatically number items, so you don't have to type numbers yourself.

You can change the numbering style with the type attribute (numbers, letters, roman numerals).

Remember to use semantic HTML for accessibility; screen readers announce the list and item numbers.

Summary

Use <ol> to create numbered lists.

Each list item goes inside <li> tags.

Ordered lists are great for steps, rankings, or anything where order matters.