Ordered lists are used to group related items where the sequence or order matters. They're displayed with numbers (or other sequential markers) by default, making them perfect for instructions, rankings, and step-by-step processes.
The OL Element
The <ol> (ordered list) element creates a list of items marked with numbers or other sequential indicators. Each item is wrapped in an <li> element, just like unordered lists.
basic-ol.html
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>This renders as:
- First item
- Second item
- Third item
Practical Examples
Step-by-Step Instructions
instructions.html
<h2>How to Make Coffee</h2>
<ol>
<li>Boil water in a kettle</li>
<li>Add coffee grounds to the filter</li>
<li>Pour hot water over the grounds</li>
<li>Wait 4 minutes for brewing</li>
<li>Pour coffee into your cup</li>
<li>Add milk and sugar to taste</li>
</ol>Recipe Instructions
recipe.html
<article>
<h2>Chocolate Chip Cookies</h2>
<h3>Instructions</h3>
<ol>
<li>Preheat oven to 350°F (175°C)</li>
<li>Mix butter and sugars until creamy</li>
<li>Beat in eggs and vanilla extract</li>
<li>Combine flour, baking soda, and salt</li>
<li>Gradually blend dry ingredients into butter mixture</li>
<li>Stir in chocolate chips</li>
<li>Drop rounded tablespoons onto baking sheets</li>
<li>Bake for 10-12 minutes until golden brown</li>
</ol>
</article>Top Rankings
rankings.html
<section>
<h2>Top 5 Programming Languages in 2024</h2>
<ol>
<li>Python</li>
<li>JavaScript</li>
<li>Java</li>
<li>C++</li>
<li>TypeScript</li>
</ol>
</section>Table of Contents
toc.html
<nav>
<h2>Table of Contents</h2>
<ol>
<li><a href="#introduction">Introduction</a></li>
<li><a href="#getting-started">Getting Started</a></li>
<li><a href="#advanced-topics">Advanced Topics</a></li>
<li><a href="#best-practices">Best Practices</a></li>
<li><a href="#conclusion">Conclusion</a></li>
</ol>
</nav>Ordered List Attributes
type Attribute
The type attribute changes the numbering style:
type-attribute.html
<!-- Default: numbers (1, 2, 3) -->
<ol type="1">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ol>
<!-- Uppercase letters (A, B, C) -->
<ol type="A">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ol>
<!-- Lowercase letters (a, b, c) -->
<ol type="a">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ol>
<!-- Uppercase Roman numerals (I, II, III) -->
<ol type="I">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ol>
<!-- Lowercase Roman numerals (i, ii, iii) -->
<ol type="i">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ol>start Attribute
The start attribute specifies the starting number:
start-attribute.html
<!-- Start at 5 -->
<ol start="5">
<li>Fifth item</li>
<li>Sixth item</li>
<li>Seventh item</li>
</ol>
<!-- Start at 10 with letters -->
<ol type="A" start="10">
<li>J</li>
<li>K</li>
<li>L</li>
</ol>reversed Attribute
The reversed attribute creates a countdown:
reversed.html
<h3>Top 5 Countdown</h3>
<ol reversed>
<li>Fifth place</li>
<li>Fourth place</li>
<li>Third place</li>
<li>Second place</li>
<li>First place!</li>
</ol>Combining Attributes
combined-attributes.html
<!-- Countdown from 10 with Roman numerals -->
<ol type="I" start="10" reversed>
<li>Item X</li>
<li>Item IX</li>
<li>Item VIII</li>
</ol>The value Attribute on LI
You can set a specific number for individual list items using the value attribute on <li>:
li-value.html
<ol>
<li>First item</li>
<li>Second item</li>
<li value="10">Jump to tenth item</li>
<li>Eleventh item</li>
<li>Twelfth item</li>
</ol>List Items with Rich Content
Lists with Descriptions
rich-content.html
<h2>Installation Steps</h2>
<ol>
<li>
<strong>Download the software</strong>
<p>Visit our website and click the download button for your operating system.</p>
</li>
<li>
<strong>Run the installer</strong>
<p>Double-click the downloaded file and follow the installation wizard.</p>
</li>
<li>
<strong>Configure settings</strong>
<p>Launch the application and complete the initial setup process.</p>
</li>
</ol>Lists with Code Examples
code-steps.html
<h2>Tutorial Steps</h2>
<ol>
<li>
Create a new HTML file
<pre><code><!DOCTYPE html>
<html>
</html></code></pre>
</li>
<li>
Add the head section
<pre><code><head>
<title>My Page</title>
</head></code></pre>
</li>
<li>
Add the body content
<pre><code><body>
<h1>Hello World</h1>
</body></code></pre>
</li>
</ol>When to Use Ordered Lists
✅ Use ordered lists for:
- Step-by-step instructions
- Recipes and cooking directions
- Rankings and top lists
- Sequential processes
- Numbered requirements
- Chronological events
- Priority-ordered items
- Table of contents
❌ Don't use ordered lists for:
- Items where order doesn't matter (use ul instead)
- Navigation menus (usually better with ul)
- Simple collections without sequence
- Data that should be in a table
Styling Examples
While this is an HTML tutorial, here are common CSS customizations:
ol-styles.css
/* Custom numbering color */
ol {
color: #666;
}
ol li {
color: #000;
}
/* Larger spacing between items */
ol li {
margin-bottom: 1rem;
}
/* Decimal with leading zeros (01, 02, 03) */
ol {
list-style-type: decimal-leading-zero;
}
/* Inside positioning */
ol {
list-style-position: inside;
}
/* Remove default numbering */
ol.custom {
list-style: none;
counter-reset: item;
}
ol.custom li {
counter-increment: item;
}
ol.custom li::before {
content: "Step " counter(item) ": ";
font-weight: bold;
color: #0066cc;
}Common Design Patterns
Tutorial Steps
tutorial-steps.html
<section class="tutorial">
<h2>Build Your First Website</h2>
<ol>
<li>
<h3>Set Up Your Development Environment</h3>
<p>Install a code editor like Visual Studio Code and set up your workspace.</p>
</li>
<li>
<h3>Create Your HTML File</h3>
<p>Start with a basic HTML structure and save it as index.html.</p>
</li>
<li>
<h3>Add Content</h3>
<p>Begin adding headings, paragraphs, and images to your page.</p>
</li>
<li>
<h3>Style with CSS</h3>
<p>Create a stylesheet to make your page look beautiful.</p>
</li>
<li>
<h3>Publish Your Site</h3>
<p>Upload your files to a web hosting service.</p>
</li>
</ol>
</section>Countdown List
countdown.html
<section>
<h2>Top 10 Movies of All Time</h2>
<ol start="10" reversed>
<li>The Matrix (1999)</li>
<li>Inception (2010)</li>
<li>The Dark Knight (2008)</li>
<li>Pulp Fiction (1994)</li>
<li>The Lord of the Rings (2003)</li>
<li>Forrest Gump (1994)</li>
<li>The Godfather Part II (1974)</li>
<li>Schindler's List (1993)</li>
<li>The Shawshank Redemption (1994)</li>
<li>The Godfather (1972)</li>
</ol>
</section>Multi-Level Process
multi-level.html
<h2>Project Phases</h2>
<ol type="I">
<li>
<strong>Planning Phase</strong>
<ol type="A">
<li>Define project scope</li>
<li>Identify stakeholders</li>
<li>Create timeline</li>
</ol>
</li>
<li>
<strong>Development Phase</strong>
<ol type="A">
<li>Design architecture</li>
<li>Write code</li>
<li>Conduct testing</li>
</ol>
</li>
<li>
<strong>Deployment Phase</strong>
<ol type="A">
<li>Prepare production environment</li>
<li>Deploy application</li>
<li>Monitor performance</li>
</ol>
</li>
</ol>Accessibility Considerations
♿ Accessibility Best Practices:
- Screen readers announce ordered lists and item numbers
- Users understand the sequence is important
- Keep instructions clear and concise
- Use descriptive text for each step
- Test with keyboard navigation for linked lists
- Don't rely only on numbers to convey meaning
Best Practices
✅ Do:
- Use ol when order or sequence matters
- Keep steps clear and actionable
- Use appropriate numbering style (type attribute)
- Include all necessary li elements
- Provide context for the list
- Use descriptive headings before lists
❌ Don't:
- Use ol when order doesn't matter
- Put content directly in ol (must be in li)
- Forget closing tags
- Make lists too long without grouping
- Mix ordered and unordered lists randomly
OL vs UL: Quick Comparison
| Aspect | Ordered List (ol) | Unordered List (ul) |
|---|---|---|
| Marker | Numbers, letters, or Roman numerals | Bullets (disc, circle, square) |
| Use When | Order matters | Order doesn't matter |
| Examples | Instructions, rankings, recipes | Features, shopping lists, menus |
| Attributes | type, start, reversed | No special attributes |
Key Takeaways
<ol>creates an ordered (numbered) list- Use ordered lists when sequence matters
typeattribute changes numbering style (1, A, a, I, i)startattribute sets the starting numberreversedattribute creates countdownsvalueattribute on li sets specific item numbers- Perfect for instructions, rankings, and sequential processes
- Screen readers announce both the list and item numbers
What's Next?
Now that you understand both unordered and ordered lists, you're ready to learn about description lists. In the next lesson, we'll explore the dl, dt, and dd elements for creating term-definition pairs.