Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
An ordered list is used when the sequence or order of items matters. Each item is automatically numbered. Use the <ol> element to create an ordered list, and wrap each item in <li>.
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>The most basic ordered list uses the <ol> tag and automatically numbers your items starting from 1.
Basic ordered list for step-by-step directions
<h3>Recipe Steps</h3>
<ol>
<li>Gather all ingredients</li>
<li>Preheat oven to 350°F</li>
<li>Mix ingredients together</li>
<li>Pour into baking pan</li>
<li>Bake for 25 minutes</li>
</ol>Loading preview...
You can change how items are numbered using the type attribute on the <ol> element.
Numbers (1, 2, 3) - Default
1Uppercase letters (A, B, C)
ALowercase letters (a, b, c)
aUppercase Roman numerals (I, II, III)
ILowercase Roman numerals (i, ii, iii)
iSee different numbering styles in action
<div class="list-types">
<div class="type-group">
<h4>Numbers (1, 2, 3) - Default</h4>
<ol type="1">
<li>First step</li>
<li>Second step</li>
<li>Third step</li>
</ol>
</div>
<div class="type-group">
<h4>Uppercase Letters (A, B, C)</h4>
<ol type="A">
<li>First step</li>
<li>Second step</li>
<li>Third step</li>
</ol>
</div>
<div class="type-group">
<h4>Lowercase Letters (a, b, c)</h4>
<ol type="a">
<li>First step</li>
<li>Second step</li>
<li>Third step</li>
</ol>
</div>
<div class="type-group">
<h4>Roman Numerals (I, II, III)</h4>
<ol type="I">
<li>First step</li>
<li>Second step</li>
<li>Third step</li>
</ol>
</div>
<div class="type-group">
<h4>Lowercase Roman (i, ii, iii)</h4>
<ol type="i">
<li>First step</li>
<li>Second step</li>
<li>Third step</li>
</ol>
</div>
</div>Loading preview...
Change the starting number of your list
<ol start="5">
<li>Item 5</li>
<li>Item 6</li>
</ol>Count down instead of up
<ol reversed>
<li>Third</li>
<li>Second</li>
<li>First</li>
</ol>Custom starting numbers and reversed ordering
<h3>Starting from Different Numbers</h3>
<div class="start-examples">
<div class="example">
<p class="label">Start from 5:</p>
<ol start="5">
<li>Fifth item</li>
<li>Sixth item</li>
<li>Seventh item</li>
</ol>
</div>
<div class="example">
<p class="label">Start from 10:</p>
<ol start="10">
<li>Tenth item</li>
<li>Eleventh item</li>
<li>Twelfth item</li>
</ol>
</div>
<div class="example">
<p class="label">Reversed (descending):</p>
<ol reversed>
<li>Third item</li>
<li>Second item</li>
<li>First item</li>
</ol>
</div>
</div>Loading preview...
You can nest lists inside list items to create sub-lists. Nested lists are useful for breaking down complex procedures into detailed steps.
<ol>
<li>Main step
<ol>
<li>Sub-step 1</li>
<li>Sub-step 2</li>
</ol>
</li>
<li>Next main step</li>
</ol>Nested lists for detailed procedures
<h3>Multi-Level Instructions</h3>
<ol>
<li>Prepare ingredients
<ol>
<li>Wash vegetables</li>
<li>Cut into pieces</li>
<li>Set aside</li>
</ol>
</li>
<li>Cook the meal
<ol>
<li>Heat oil in pan</li>
<li>Add ingredients</li>
<li>Stir frequently</li>
</ol>
</li>
<li>Serve and enjoy</li>
</ol>Loading preview...
Step-by-step cooking instructions
Sequential learning steps
Top 10, best to worst lists
How-to guides and processes
Navigation and driving routes
Most to least important items