Lists are powerful tools to group similar elements, and lists give visitors to your site an easy way to zoom in on groups of information. Just about anything fits in a list, from sets of instructions to collections of links. A numbered list consists of at least two items, each prefaced by a number. Use a numbered list when the order or priority of items is important.
You use two kinds of elements for a numbered list:
The ordered list element (
- ) specifies a numbered list.
List item elements (
- ) mark each item in the list.
A numbered list with three items requires elements and content in the following order:
Content for the first list item
Content for the second list item
Content for the third list item
The following markup defines a three-item numbered list:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Numbered Lists</title>
</head>
<body>
<h1>Things to do today</h1>
<ol>
<li>Feed cat</li>
<li>Wash car</li>
<li>Grocery shopping</li>
</ol>
</body>
</html>
This figure shows how a browser renders this markup. You don’t have to specify a number for each item in a list; the browser identifies list items from the markup and adds numbers, including a period after each one by default.
If you swap the first two items in the list, they’re still numbered in order when the page appears, as shown in this figure.
<ol>
<li>Wash car</li>
<li>Feed cat</li>
<li>Grocery shopping</li>
</ol>