Flash cards
Review the key moves
What is the main idea behind HTML Ordered Lists?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
Which statement best captures the main point of this lesson?
Complete the missing token from the example code.
<li>___</li>Put the learning moves in the order that makes the concept easiest to apply.
The HTML <ol> tag defines an ordered list. An ordered list can be numerical or alphabetical.
Ordered HTML List
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items will be marked with numbers by default:
Example
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>Live preview
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
Numbers:
<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>Live preview
Uppercase Letters
Uppercase Letters:
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>Live preview
Lowercase Letters
Lowercase Letters:
<ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>Live preview
Roman Numbers - Uppercase
Uppercase Roman Numbers:
<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>Live preview
Roman Numbers - Lowercase
Lowercase Roman Numbers:
<ol type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>Live preview
Control List Counting
By default, an ordered list will start counting from 1. If you want to start counting from a specified number, you can use the start attribute:
Example
<ol start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>Live preview
Nested HTML Lists
Lists can be nested (list inside list):
Example
<ol>
<li>Coffee</li>
<li>Tea
<ol>
<li>Black tea</li>
<li>Green tea</li>
</ol>
</li>
<li>Milk</li>
</ol>Live preview
Note
A list item ( <li> ) can contain a new list, and other HTML elements, like images and links, etc.
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
HTML List Tags
| Tag | Description |
|---|---|
| <ul> | Defines an unordered list |
| <ol> | Defines an ordered list |
| <li> | Defines a list item |
| <dl> | Defines a description list |
| <dt> | Defines a term in a description list |
| <dd> | Describes the term in a description list |
For a complete list of all available HTML tags, visit our HTML Tag Reference .