HTML Ordered Lists Explanation with Examples

[akhilpoojari]

An ordered list in HTML (`<ol>`) is used to present information in a numbered format. Each item in the list is preceded by a number or another marker that indicates its position or importance within the list. Here's an explanation of how to use ordered lists with examples:

Syntax:
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<!-- More list items if needed -->
</ol>

Example 1: Simple Ordered List
<ol>
<li>Apples</li>
<li>Bananas</li>
<li>Oranges</li>
</ol>

Output:
1. Apples
2. Bananas
3. Oranges

Example 2: Ordered List with Nested Lists
<ol>
<li>Fruits</li>
<ol>
<li>Apples</li>
<li>Bananas</li>
<li>Oranges</li>
</ol>
<li>Veggies</li>
<ol>
<li>Carrots</li>
<li>Broccoli</li>
<li>Spinach</li>
</ol>
</ol>

Output:
1. Fruits
1. Apples
2. Bananas
3. Oranges
2. Veggies
1. Carrots
2. Broccoli
3. Spinach

Example 3: Ordered List with Custom Start Value
<ol start="5">
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
</ol>
Output:
5. Item 5
6. Item 6
7. Item 7

Example 4: Ordered List with Custom Type and Start Value

<ol type="A" start="3">
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ol>

Output:
C. Item A
D. Item B
E. Item C

Notes:
- The `<ol>` element is used to create ordered lists, and each list item is denoted by the `<li>` element.
- Ordered lists are typically rendered with numbers by default, but you can customize the numbering style using the `type` attribute.
- You can also specify a custom starting value for the list items using the `start` attribute.
- Ordered lists can be nested within one another to create hierarchical structures.