Demo
Summary
To create an ordered list in HTML, use the ol and li elements.
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>To see what this element looks like in the browser, view the Demo section below.
Details
An ordered list in HTML gets rendered as a list with numbers.
Nested lists
It’s possible to nest an ordered list inside another ordered list, like this:
<ol>
<li>Item 1
<ol>
<li>Subitem 1</li>
<li>Subitem 2</li>
</ol>
</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>Notice that the nested list is placed inside a list item element. Also notice that the nested list is placed before the closing tag of the list item.
It’s also possible to nest an unordered list inside an ordered list, like this:
<ol>
<li>Item 1
<ul>
<li>Subitem 1</li>
<li>Subitem 2</li>
</ul>
</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>Exercises
Recreate the embedded CodePen demo by typing out the HTML code. Then, try customizing the text in the list elements.
Using your text editor or CodePen, try creating your own ordered list. You can try creating an ordered list of your favorite movies, games, or some other type of list.
References
The Ordered List element on MDN