HTML Ordered Lists
The topic of discussion is HTML Lists Ordered. An ordered list is defined by the HTML <ol> tag. There are two types of ordered lists: numerical and alphabetical.
HTML Lists Ordered
Using an ordered list in HTML, items can be arranged in a specific order, with sequential numbers assigned to each item. Unlike an unordered list, where each item is denoted by a bullet point or other symbol.
In order to create an ordered list in HTML, the <ol> tag is used to indicate the start of the list and the <li> tag is used to identify each item in the list. In order to generate the numbers for each item in the list, the browser automatically generates the numbers starting with 1 and incrementing them with each subsequent item in the list.
CSS allows you to customize the look and feel of the ordered list in a variety of ways, such as changing the numbering style, adding a background color, or adjusting the spacing between the items within the ordered list. There are many ways in which ordered lists are used in web content, such as step-by-step instructions, top 10 lists, and other types of ranking content.
A number will be assigned to each item in the list by default:
Example
Html Lists Ordered- The Type Attribute
The <ol> tag’s type parameter specifies the kind of list item marker:
| Type | Overview |
|---|---|
| type=”A” | Uppercase letters will be used to number the items on the list |
| type=”1″ | List items are numbered (by default) |
| type=”I” | List items will be numbered in uppercase roman numerals |
| type=”a” | List items will be numbered in lowercase |
| type=”i” | Roman numerals will be used to number the items on the list |
Numbers:
Lowercase Letters:
Uppercase Letters:
Lowercase Roman Numbers:
Uppercase Roman Numbers:
Control List Counting
An ordered list counts from 1 by default. You can use the start attribute if you want to start counting from a specified number, such as:
Example
Reversed HTML Lists
The reversed attribute is a boolean attribute.
It specifies that the list order should be descending (9,8,7…) rather than ascending (1, 2, 3…).
Example:
Another example of reversed ordered list using the alphabatical order:
Example:
Here is the combined list of all the ol types:
Example:
HTML Lists Ordered Nested
There is the ability to nest lists (list inside list within a list) HTML lists are ordered as follows:
Example
Note: A list item (<li>) may include additional HTML elements, such as links and photos, as well as a new list.
HTML Lists Ordered – Tags
| Tag | Overview |
|---|---|
| <dt> | Delivers a term’s definition in a description list. |
| <ul> | List that is arranged in order in HTML Lists Ordered |
| <li> | List items are defined by this property |
| <dl> | A description list is specified |
| <ol> | Lists that are ordered |
| <dd> | Provides a description list for the term |
Visit our HTML Tag Reference to see a complete list of all HTML tags.
Chapter Summary
- Representing an ordered list using HTML’s <ol> element
- Determining the numbering type with the HTML type attribute
- To describe a list item, use the HTML <li> element
- Nested lists are viable
- HTML elements can be included in list items
