Ordered lists are a foundational HTML pattern for displaying ranked content, helping readers follow steps or priorities clearly.
Below is a detailed guide to creating effective ol examples, covering structure, accessibility, and best practices for real projects.
| Aspect | Description | Best Practice | Example Use |
|---|---|---|---|
| Tag | Use ol for ordered sequences, ul for unordered groups. |
Reserve ol for steps, rankings, or time-based instructions. |
Numbered checkout steps |
| Type attribute | Sets numbering style (1, I, i, A, a). | Match numbering to context, e.g., legal outlines use uppercase Roman. | <ol type="I"> for section references |
| Start attribute | Defines the starting number, useful for resuming sequences. | Use sparingly to avoid confusion; document when non‑1 starts. | <ol start="7"> for continued instructions |
| Value attribute | Overrides number on a specific li.
| Apply only when order diverges; keep consistent with surrounding items. | Restart a sublist at 1 within a larger sequence |
Basic Ordered List Syntax
The simplest ol example uses <ol> wrapping multiple <li> items.
Minimal example code
Writing <ol><li>First</li><li>Second</li></ol> produces a clean numbered list with default styling.
Use semantic HTML by keeping list items parallel in structure and granularity.
For accessibility, avoid skipping numbering levels and do not use ol purely for visual alignment.
Ordered Lists for Recipes
Recipe instructions benefit from ordered lists because timing and sequence matter.
Key recipe structure
Place prep steps before cooking, and keep each li focused on a single action to reduce mistakes.
Use start and value only when the recipe continues from a previous step or splits into subsections.
Combine ordered steps with nested ol inside an li for substeps, such as seasoning in stages.
Accessibility and Semantics
Screen readers announce ordered list items with their numbers, supporting task comprehension.
Avoid decorative numbering
Do not use ol solely for visual alignment; if order is not meaningful, choose ul instead.
Ensure sufficient color contrast for numbers and maintain readable font sizes across devices.
Keep list length manageable; very long lists can be broken into sections with descriptive headings.
Advanced Styling Techniques
CSS allows custom counters, aligned numbers, and responsive layouts while preserving semantics.
Counter customization
Properties like list-style-type and ::marker let you change appearance without altering structure.
On narrow screens, consider stacking indicators vertically or increasing padding to prevent number truncation.
Test across browsers to confirm numbering remains consistent when custom styles are applied.
Optimization and Maintenance
Consistent patterns make lists easier to update and test across projects.
- Use semantic
olonly when order is meaningful. - Keep list item text concise and action oriented.
- Validate HTML to avoid skipped or duplicate numbers.
- Test lists with assistive technologies to confirm correct reading order.
- Apply responsive spacing so numbers and content stay aligned on small screens.
- Document any custom numbering rules for future developers.
FAQ
Reader questions
How do I restart numbering on a new section?
Use the start attribute, such as <ol start="1"> , at the beginning of the new section to reset to 1.
Can I mix letters and numbers in the same ordered list?
No, keep a single numbering scheme per ol ; switch to a new list or use ul and CSS if mixed markers are required.
What is the correct way to create nested numbered lists?
Place a new ol inside an li of the parent list; browsers will automatically indent and continue numbering.
Should I use ordered lists for navigation breadcrumbs?
Yes, breadcrumbs are a sequence; use ol with aria-label for clarity and ensure each item links appropriately except the current page.