13. Ordered List (Ordered List - <ol> and <li>)
Numbered lists: the type (1, a, A, i, I), start and reversed attributes
Real-life analogy
Like the method for making tea: first you have to boil the water, then add the tea leaves. If you reverse the order, the tea will be ruined! Here the order (1, 2, 3) is very important.
Explanation
Ordered list <ol>: It is used when it is essential for the points of the list to be in order (Numbered).
Its 3 most powerful attributes:
type="1": Normal counting 1, 2, 3 (default).type="A": Capital letters A, B, C...type="a": Small letters a, b, c...type="I": Capital Roman numerals I, II, III, IV...type="i": Small Roman numerals i, ii, iii, iv...start="10": To start the counting from a particular number (for example 10, 11, 12...).reversed: To run the count backwards (10, 9, 8...) (for example top 3 winners or a countdown).
Golden rules
- If you are building an exam question paper or a step-by-step guide, always use
<ol>.
Common mistake
Manually typing 1., 2. in a paragraph. Always use <ol> so that the numbers update automatically when a new item is added.
Example code
<!DOCTYPE html>
<html>
<body style="font-family: sans-serif; padding: 20px;">
<!-- List with Roman numerals -->
<h4 style="color: #b45309; margin-bottom: 4px;">List with Roman numerals (type="I"):</h4>
<ol type="I" style="line-height: 1.6; color: #334155;">
<li>Stage one: Registration</li>
<li>Stage two: Exam</li>
<li>Stage three: Interview</li>
</ol>
<!-- Countdown (Reversed Count) -->
<h4 style="color: #dc2626; margin-top: 15px; margin-bottom: 4px;">Rocket Launch (<ol reversed start="3">):</h4>
<ol reversed start="3" style="font-weight: bold; color: #b91c1c;">
<li>Engine ignition</li>
<li>Buckle up</li>
<li>Lift-off! 🚀</li>
</ol>
</body>
</html>Quick quiz
If you want the count of an ordered list to start from the number 5 (5, 6, 7...), which code would you write?
- <ol begin='5'>
- <ol start='5'>
- <ol from='5'>
- <ol initial='5'>
Show answer
Answer: <ol start='5'>
Using <ol start='5'> makes the count start from 5.