HTML Lists
Ordered Lists
An ordered list is defined by the HTML <ol> tag. You can have an alphabetical or numeric ordered list.
Ordered HTML List
The <ol> tag indicates that the list is sorted. The <li> tag comes first on every list item.
By default, numbers will be used to indicate the list items:
Example
<ol>
<li>Water</li>
<li>Ice</li>
<li>Air</li>
</ol>
Ordered HTML List - The Type Attribute
The type attribute of the <ol> tag, defines the type of the list item marker:
| Type | Description |
|---|---|
| type="1" | The list items will be numbered with numbers (default) |
| type="A" | The list items will be numbered with uppercase letters |
| type="a" | The list items will be numbered with lowercase letters |
| type="I" | The list items will be numbered with uppercase roman numbers |
| type="i" | The list items will be numbered with lowercase roman numbers |
Numbers:
<ol type="1">
<li>Water</li>
<li>Ice</li>
<li>Air</li>
</ol>
Uppercase Letters:
<ol type="A">
<li>Water</li>
<li>Ice</li>
<li>Air</li>
</ol>
Lowercase Letters:
<ol type="a">
<li>Water</li>
<li>Ice</li>
<li>Air</li>
</ol>
Uppercase Roman Numbers:
<ol type="I">
<li>Water</li>
<li>Ice</li>
<li>Air</li>
</ol>
Lowercase Roman Numbers:
<ol type="i">
<li>Water</li>
<li>Ice</li>
<li>Air</li>
</ol>
Control List Counting
An ordered list will always begin counting from 1 by default. The start attribute can be used to begin counting from a given number:
Example
<ol start="50">
<li>Water</li>
<li>Ice</li>
<li>Air</li>
</ol>
Nested HTML Lists
Lists can be nested (list inside list):
Example
<ol>
<li>Coffee</li>
<li>Tea
<ol>
<li>Hot tea</li>
<li>Cold tea</li>
</ol>
</li>
<li>Milk</li>
</ol>
Ordered HTML List
The <ol> tag indicates that the list is sorted. The <li> tag comes first on every list item.
By default, numbers will be used to indicate the list items:
Example
<ol>
<li>Water</li>
<li>Ice</li>
<li>Air</li>
</ol>
Chapter Summary
- Use the HTML <ol> element to define an ordered list
- Use the HTML type attribute to define the numbering type
- Use the HTML <li> element to define a list item
- Lists can be nested
- List items can contain other HTML elements
ordered list
HTML list
tag
list types
numbered list
alphabetical list
roman numerals
nested lists
list counting
list attributes
HTML
HTML5
HTML tutorials
Learn HTML
Free HTML tutorials
HTML Example
HTML Explained
Creating Ordered Lists in HTML
When it comes to presenting information in a structured and sequential manner, ordered lists in HTML are a valuable tool. These lists allow you to enumerate items, providing a clear and organized way to convey your content.
In HTML, the `
` (Ordered List) element is used to create an ordered list. Each item within the list is denoted by the `
` (List Item) tag. By default, ordered lists display numbers, but you can customize the list type using the `type` attribute.
Some common list types include:
1. Numeric (1, 2, 3, …)
A. Alphabetical (A, B, C, …)
I. Roman Numerals (I, II, III, …)
You can also nest ordered lists within other lists, creating a hierarchical structure. This is achieved by placing an `
` or `
` (Unordered List) element inside an `
` tag.
Additionally, the `start` attribute allows you to specify the starting number or letter for the list, while the `reversed` attribute can be used to display the list in reverse order.
Mastering ordered lists in HTML is a valuable skill for any web developer, as they contribute to the overall structure and readability of your web pages.
When creating content for the web, ordered lists are a crucial HTML element to understand. An ordered list, denoted by the `
` tag, creates a numbered or otherwise enumerated list of items.
There are several different list types you can use within the `
` element:
1. Numeric (the default): 1, 2, 3, 4, etc.
2. Alphabetical: a, b, c, d, etc. or A, B, C, D, etc.
3. Roman numerals: i, ii, iii, iv, etc. or I, II, III, IV, etc.
You can specify the list type using the `type` attribute within the `
` tag. For example, `
` would create an alphabetical uppercase list.
Ordered lists can also be nested inside one another, allowing for complex hierarchical structures. When nesting lists, each new list will inherit the numbering or lettering from the parent list.
Additional attributes like `start` and `reversed` provide even more control over how the list items are counted and displayed. Understanding the full capabilities of ordered lists is key to creating well-structured, semantic HTML content.
