Advanced Ordered Lists
Overview
We covered the basics of `<ol>` (Ordered Lists), which automatically number your items 1, 2, 3. But what if you want a list to count backwards? Or what if you want to use Roman numerals (I, II, III) or letters (A, B, C)?
The `<ol>` tag has several specific attributes to control exactly how the counting happens without needing to write a single line of CSS.
Syntax
You can change the numbering style using the `type` attribute. `1` = Numbers (Default) `A` = Uppercase Letters `a` = Lowercase Letters `I` = Uppercase Roman Numerals `i` = Lowercase Roman Numerals
<!-- This will display as A. Apple, B. Banana -->
<ol type="A">
<li>Apple</li>
<li>Banana</li>
</ol>
<!-- This will display as I. First, II. Second -->
<ol type="I">
<li>First</li>
<li>Second</li>
</ol>You can tell the list to start counting from a specific number using `start`. You can also make it count down like a rocket launch using `reversed`.
<!-- Starts counting at 5 (5. Item, 6. Item) -->
<ol start="5">
<li>Fifth Item</li>
<li>Sixth Item</li>
</ol>
<!-- Counts backwards! (3, 2, 1) -->
<ol reversed>
<li>Gold Medal</li>
<li>Silver Medal</li>
<li>Bronze Medal</li>
</ol>Common Pitfalls
- The 'type' attribute on <ol> is completely valid HTML5, but many modern developers prefer to use CSS (`list-style-type: upper-roman;`) instead, to keep HTML purely focused on structure rather than styling.
Real-World Example
Creating a legal document outline with nested ordered lists of different types:
<!-- Main sections in Roman Numerals -->
<ol type="I">
<li>
Terms of Service
<!-- Sub-sections in uppercase letters -->
<ol type="A">
<li>User Responsibilities</li>
<li>Payment Terms</li>
</ol>
</li>
<li>
Privacy Policy
</li>
</ol>