Contents
HTML Ordered List: Main Tips
- Using
<ol>
tags, you can create HTML ordered lists of items. - The <li> elements that are descendants of
<ol>
define list items. - To create unordered lists, use <ul> tag.
- HTML
ol
tag supports all global attributes.
Using ol Tags
By using HTML ol
tags in a document, you can create HTML numbered lists:
HTML ordered lists can also be nested:
<ol>
<li>Coffee</li>
<li>Breakfast
<ol>
<li>Eggs</li>
<li>Bacon</li>
<li>Toast</li>
</ol>
</li>
<li>Cake</li>
</ol>
Theory is great, but we recommend digging deeper!
Mostly Used ol Tag Attributes
The type
attribute defines the type of numbering to use:
Value | Description |
---|---|
1 | Numbers (default value) |
I | Uppercase Roman numerals |
i | Lowercase Roman numerals |
A | Uppercase letters |
a | Lowercase letters |
HTML numbered list starts from number 1 by default. To change that, you can use the start
attribute. It defines a start value for numbering the HTML ordered list. start
should always be defined in a number, no matter the chosen numbering type:
Note: both start and type have been deprecated in HTML4 and reintroduced again in HTML5.
Newly introduced in HTML5, the reversed
attribute sets the ordering of the list to descending:
compact
rendered the list in a compact style. However, it has been deprecated in HTML5 and should not be used:
<ol compact>
<li>Action</li>
<li>Adventure</li>
<li>Thriller</li>
</ol>
Tip: instead of compact, use CSS line-height property. A value of 80% will give a very similar effect.
Browser support

Chrome

Edge

Firefox

IE

Opera

Safari
Mobile browser support

Chrome

Firefox

Opera
