HTML - Ordered Lists
HTML - Ordered Lists
An ordered list is defined by <ol> tag where all list items are marked an ordered list.
Ordered HTML Lists
An ordered list is a collection of items that have a specific order or sequence. HTML ordered list is created by <ol> tag where each list item is defined by the <li> tag.
This type of ordered list is used to show the list items, where they are marked with an ordered numbered list, such as the steps of a recipe, the ranking of a leaderboard, or the chronological order of events as shown in the below figure:
Creating Ordered Lists
To create an ordered list in HTML, we use the <ol> tag and nest <li> tags inside it. Each <li> element represents one item in the list. The numbering starts with 1 and is incremented by one for each successive ordered list element tagged with <li>. Like an unordered list, it also allows us to change the numbering style using the type attribute of the <ol> element.
Example
The following example demonstrates creating ordered lists in HTML:
If you click on Edit & Run the above example displays an ordered list.
HTML Ordered List - The type Attribute
The type attribute for the <ol> tag is used to specify the type of marker for the ordered list in HTML. By default, the type of list numbering is numbers starting with 1, 2, 3, and so on. You can change the type of numbers by using any of the values given below:
| S.No | Value & Description |
|---|---|
| 1 | 1 It is the default type of marker. |
| 2 | I List items will be displayed with roman number marker. |
| 3 | A It will set the marker to upper case alphabets. |
Ordered List With Numbers
The following example demonstrates the ordered lists with numbers type marker:
Ordered List With Uppercase Roman
The following example demonstrates the ordered lists with uppercase roman numbers type marker:
Ordered List With Lowercase Roman
The following example demonstrates the ordered lists with lowercase roman numbers type marker:
Ordered List With Uppercase Alphabets
The following example demonstrates the ordered lists with uppercase alphabets type marker:
Ordered List With Lowercase Alphabets
The following example demonstrates the ordered lists with lowercase alphabets type marker:
The above examples display ordered lists with counting numbers, roman numbers, and alphabets.
HTML Ordered List - The start Attribute
By default, the numbering starts with 1, but you can change it by using the start attribute with the <ol> tag. The style attribute defines the starting numbers of the ordered list.
Syntax
The following are the different syntaxes (use cases) to define number types and the initial (starting) number for the ordered list:
Example
Following is an example where we used <ol type="i" start="4" > :
Styling HTML Ordered List
Styling ordered lists with CSS allows customization of the appearance to match the design preferences of a website. The CSS styles can target both the list itself ( <ol> ) and the list items ( <li> ).
Example
Below is the program example that includes all the CSS styling for ordered list:
The program creates a styled HTML document with ordered lists. It includes basic styling, changes numbering styles to Roman and letters, adds counters to items, and changes text color on hover.
Nested Ordered Lists
HTML allows nesting of lists; you can create nested ordered lists to display a list of items inside an item of the outer list element.
Note: You can also change the type of outer or inner lists. In the below example, the main list has decimal numbers, the list of the second list item has lowercase roman numbers, and the list of the third list item has uppercase roman numbers. You can also define the starting number as per your requirement.
Example
The following example deonstartes the use of nested ordered lists: