Ordered lists are used to display a list of items where the sequence or order of the items is important. The <ol> tag defines the ordered list itself, and each item within the list is defined by the <li> (list item) tag. This structure helps web browsers render numbered or lettered lists, making content easily scannable and digestible for users.
Example 1: Basic Ordered List
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Ordered List Example</title>
</head>
<body>
<h1>My Top 3 Favorite Fruits</h1>
<ol>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ol>
</body>
</html>
Explanation This code creates a simple numbered list using the default type="1" (Arabic numerals). It's a fundamental way to present sequential data on a webpage, enhancing readability and user experience.
Attributes for Ordered Lists: type, start, and reversed
Ordered lists offer several attributes to control their appearance and behavior:
type: Specifies the kind of marker to be used for the list items (e.g., numbers, letters, Roman numerals).
start: Defines the starting value of the list items.
reversed: A Boolean attribute that specifies that the list order should be descending.
Example 2: type Attribute - Roman Numerals
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Ordered List Type Example</title>
</head>
<body>
<h1>Course Modules (Roman Numerals)</h1>
<ol type="I">
<li>Introduction to HTML</li>
<li>CSS Fundamentals</li>
<li>JavaScript Basics</li>
</ol>
</body>
</html>
Explanation This example demonstrates the type="I" attribute, rendering the list items with uppercase Roman numerals. This is ideal for formal documents or outlines where such numbering is preferred.
Example 3: start Attribute - Custom Starting Point
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Ordered List Start Example</title>
</head>
<body>
<h1>Numbered Steps (Starting from 5)</h1>
<ol start="5">
<li>Prepare ingredients</li>
<li>Mix thoroughly</li>
<li>Bake for 30 minutes</li>
</ol>
</body>
</html>
Explanation Here, the start="5" attribute is used to begin the numbering of the list from 5. This is useful for continuing a list from a previous section or for specific numbering requirements.
Example 4: reversed Attribute - Descending Order
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Ordered List Reversed Example</title>
</head>
<body>
<h1>Top Scorers (Descending)</h1>
<ol reversed>
<li>Player A (150 points)</li>
<li>Player B (120 points)</li>
<li>Player C (100 points)</li>
</ol>
</body>
</html>
Explanation The reversed attribute renders the list items in descending order (e.g., 3, 2, 1). This is perfect for displaying rankings or countdowns, improving content clarity for users.
Example 5: Combining type, start, and reversed
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Ordered List Combined Attributes</title>
</head>
<body>
<h1>Historical Eras (Reversed, Roman, Starting from V)</h1>
<ol type="I" start="5" reversed>
<li>Modern Era</li>
<li>Industrial Revolution</li>
<li>Middle Ages</li>
<li>Ancient Rome</li>
<li>Ancient Greece</li>
</ol>
</body>
</html>
Explanation This advanced example combines all three attributes: type="I", start="5", and reversed. It creates a Roman numeral list starting from V and counting downwards. This demonstrates the flexibility of ordered lists for custom numbering schemes.