HTML Ordered Lists
The <ol> tag defines an ordered list. An ordered list can be numbered or alphabetical.
Ordered HTML List
An ordered list starts with the <ol> tag, and each item starts with the <li> tag. By default the items are marked with numbers.
Example
A basic numbered list.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic Ol</title>
</head>
<body>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
Ordered HTML List - The Type Attribute
The type attribute of <ol> sets the marker type: type="1" for numbers (the default), type="A" for uppercase letters, type="a" for lowercase letters, type="I" for uppercase Roman numerals, and type="i" for lowercase Roman numerals.
Numbers
Numbered with numbers.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Type Numbers</title>
</head>
<body>
<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
Uppercase letters
Numbered with uppercase letters.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Type Uppercase</title>
</head>
<body>
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
Lowercase letters
Numbered with lowercase letters.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Type Lowercase</title>
</head>
<body>
<ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
Uppercase Roman numerals
Numbered with uppercase Roman numerals.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Type Roman Upper</title>
</head>
<body>
<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
Lowercase Roman numerals
Numbered with lowercase Roman numerals.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Type Roman Lower</title>
</head>
<body>
<ol type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
Control List Counting
By default an ordered list starts counting from 1. To start from another number, use the start attribute.
Example
A list that starts counting from 50.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Start Attribute</title>
</head>
<body>
<ol start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
Nested HTML Lists
Lists can be nested, meaning one list can go inside another.
Note: A list item (<li>) can hold a new list and other elements too, like images and links.
Example
An ordered list with a sub-list inside one item.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nested Ol</title>
</head>
<body>
<ol>
<li>Coffee</li>
<li>Tea
<ol>
<li>Black tea</li>
<li>Green tea</li>
</ol>
</li>
<li>Milk</li>
</ol>
</body>
</html>
Chapter Summary
To recap: use the <ol> element for an ordered list, the type attribute for the numbering style, and the <li> element for each item. Lists can be nested, and items can hold other elements.
HTML List Tags
The list-related tags are: <ul> (an unordered list), <ol> (an ordered list), <li> (a list item), <dl> (a description list), <dt> (a term), and <dd> (the description of the term).