HTML <ol> Tag
The HTML <ol> tag creates an ordered list. Learn its attributes (type, start, reversed) and CSS list-style-type with syntax and examples.
HTML <ol> tag is used to create an ordered list, which contains elements in a certain sequence.
Each element of the ordered list starts with the opening <li> tag and ends with the closing tag </li>. In addition to the text, the <li> tag may include other HTML elements (lists, images, headings, paragraphs, etc.).
In general, ordered list items have a preceding marker, such as a letter or number.
The type attribute selects which kind of marker is used. The possible values are:
type="1"— Arabic numbers (1, 2, 3, ...). This is the default.type="A"— uppercase Latin letters (A, B, C, ...).type="a"— lowercase Latin letters (a, b, c, ...).type="I"— uppercase Roman numerals (I, II, III, ...).type="i"— lowercase Roman numerals (i, ii, iii, ...).
If you do not specify the type attribute, the content of the <ol> tag is numbered with Arabic numbers, starting with one.
The type attribute is presentational — it controls how the list looks, not what it means. The modern, recommended approach is to choose the marker in CSS with the list-style-type property instead, keeping styling out of the markup. The CSS equivalents are: type="1" → decimal, type="A" → upper-alpha, type="a" → lower-alpha, type="I" → upper-roman, type="i" → lower-roman.
Both the <ol> and <ul> tags represent a list of items. However, there is a difference with the <ol> tag where the order is meaningful.
Normally, the <ol> and <ul> tags can nest as deeply as required, alternating between them as you want.
If the CSS properties are applied to the <ol> tag, then the elements nested in the <li> tag inherit them.
Syntax
The <ol> tag comes in pairs. The content is written between the opening (<ol>) and closing (</ol>) tags.
Example of the HTML <ol> tag:
Example of the ordered list with HTML <ol> Tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<ol>
<li>Appetizers</li>
<li>Hot</li>
<li>Salads</li>
</ol>
<ol start="50">
<li>Cold drinks</li>
<li>Hot drinks</li>
<li>Ice-Cream</li>
</ol>
<ol type="A">
<li>Coca-Cola</li>
<li>Ice Tea</li>
<li>Fanta</li>
</ol>
</body>
</html>In the given example, we used the start attribute with the value "50".
Rather than setting the marker in the markup with the type attribute, define it in CSS with the list-style-type property. This keeps presentation in your stylesheet and lets you reuse the rule across many lists. In the example below the marker is set in a <style> block instead of an inline style= attribute:
Example of the HTML <ol> tag used with the CSS list-style-type property:
Example of the HTML <ol> Tag with a list-style-type property
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.roman {
list-style-type: upper-roman;
}
.letters {
list-style-type: lower-alpha;
}
</style>
</head>
<body>
<h2>Examples of ordered lists</h2>
<ol class="roman">
<li>Cold drinks</li>
<li>Hot drinks</li>
<li>Ice-Cream</li>
</ol>
<ol class="letters">
<li>Coca-Cola</li>
<li>Fanta</li>
<li>Ice Tea</li>
</ol>
<ol>
<li>Coca-Cola</li>
<li>Fanta</li>
<li>Ice Tea</li>
</ol>
</body>
</html>The reversed attribute
Adding the boolean reversed attribute numbers the list in descending order. It is handy for "top 5" countdowns or any list where the last item should carry the lowest number. You can combine it with start to control the highest number.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Top three drinks</h2>
<ol reversed>
<li>Coca-Cola</li>
<li>Ice Tea</li>
<li>Fanta</li>
</ol>
</body>
</html>The markers above count down 3, 2, 1.
Nesting ordered lists
A list item can contain another <ol>, letting you build outlines and sub-steps. Each nested list restarts its own numbering. Place the nested <ol> inside the parent <li> (not between list items) so the structure stays valid.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<ol>
<li>Drinks
<ol type="a">
<li>Cold drinks</li>
<li>Hot drinks</li>
</ol>
</li>
<li>Desserts
<ol type="a">
<li>Ice-Cream</li>
<li>Cake</li>
</ol>
</li>
</ol>
</body>
</html>Attributes
| Attribute | Value | Description |
|---|---|---|
| compact | compact | Hinted that the list should be rendered more compactly, with less spacing between items. Deprecated and not supported in HTML5. To tighten spacing instead, use the CSS margin and padding properties on the <li> (or <ol>) elements. |
| reversed | reversed | Indicates that the list elements should be in descending order (instead of the usual ascending order). |
| start | number | Sets the number from which the ordered list begins. The value must be an integer; negative values may be used. When used with letters (type="A" and type="a"), the number indicates the ordinal position of the letter in the alphabet. For example, start="5" corresponds to the letter "E", so the list begins with it. If start="27" is specified, the list becomes two-digit (27 = "AA", 28 = "AB", 29 = "AC", ...). |
| type | 1, A, a, I, i | Defines the type of the list marker (decimal numbers, uppercase letters, lowercase letters, uppercase Roman numerals, lowercase Roman numerals). |
The <ol> tag supports the Global Attributes and the Event Attributes.
Related tags and properties
<ul>— an unordered (bulleted) list, when order is not meaningful.<li>— the list item used inside both<ol>and<ul>.list-style-type— the CSS property for choosing the marker style.
How to style an HTML <ol> Tag
{
"tag_name": "ol"
}