HTML Ordered Lists

HTML ordered lists use the <ol> tag to present items in a defined sequence, ensuring clear and structured display of step-based or ranked content.

• Uses <ol> to create a list with a specific order or sequence.
• Each item is defined using the <li> tag.
• Items are automatically numbered or lettered by the browser.
• Numbering style can be customized using attributes or CSS.
• Commonly used for instructions, steps, and rankings.

Syntax:

<ol>
 <li>Milks</li>
 <li>Eggs</li>
 <li>Breads</li>
 <li>Butter</li>
</ol>

Different Type Attributes in HTML Ordered List

The type attribute of <ol> tag specifies the order we want to create.

• type="1": This will list the items with numbers (default)
• type="A": This will list the items in uppercase letters.
• type="a": This will list the items in lowercase letters.
• type="I": This will list the items with uppercase Roman numbers.
• type="i": This will list the items with lowercase Roman numbers.

1. Numbered Ordered List

To create an ordered list in HTML with numerical markers, which is the default behavior for ordered lists, you simply use the <ol> (ordered list) tag without specifying a type attribute.

Example: Implementation of a default ordered list where items are displayed in numeric sequence.

2. Uppercase Letters Ordered List

To create an ordered list in HTML that uses uppercase letters for the list markers, you can use the type attribute on the <ol> tag and set it to "A".

Example: Implementation of an ordered list using the type="A" attribute to display items in uppercase alphabetical order.

3. Lowercase Letters Ordered List

To create an ordered list in HTML that uses lowercase letters for the list markers, you can use the type attribute on the <ol> tag and set it to "a".

Example: Implementation of an ordered list using the type="a" attribute to display items in lowercase alphabetical order.

4. Uppercase Roman Numbers Ordered List

To create an ordered list in HTML with uppercase Roman numerals as the markers, you can use the type attribute on the <ol> tag and set it to "I".

Example: Implementation of an ordered list using the type="I" attribute to display items in uppercase Roman numerals.

5. Lowercase Roman Numbers Ordered List

To create an ordered list in HTML with lowercase Roman numerals as the markers, you can use the type attribute on the <ol> tag and set it to "i".

Example: Implementation of an ordered list using the type="i" attribute to display items in lowercase Roman numerals.

6. Reverse Ordered List in HTML

To create a reverse-ordered list in HTML, you can use the 'reversed' attribute in the <ol> tag. This will make the list count down from the highest number.

Example: Implementation of an ordered list using the reversed attribute to display items in descending order.

7. Control List Counting

To control list counting, use the start attribute in the <ol> tag to set the starting number for the ordered list.

Example: Showcase an ordered list starting from the number 5, controlled by the “start” attribute within the <ol> tag, customizing list counting

8. Nested Ordered Lists

Nested ordered lists use <ol> inside <li> tags to create sublists, making content more organized.

Example: Creating nested ordered list, listing programming languages with their respective frameworks as subitems