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:
Html Lists Ordered- The Type Attribute
The <ol> tag’s type parameter specifies the kind of list item marker:
|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|
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:
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…).
Another example of reversed ordered list using the alphabatical order:
Here is the combined list of all the ol types:
HTML Lists Ordered Nested
There is the ability to nest lists (list inside list within a list) HTML lists are ordered as follows:
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
|<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.
- 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