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
oltag supports all global attributes.
Using ol Tags
By using HTML ol tags in a document, you can create HTML numbered lists:
<ol>
<li>Action</li>
<li>Adventure</li>
<li>Thriller</li>
<li>Comedy</li>
</ol>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>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 |
<ol type="I">
<li>Burger</li>
<li>Pizza</li>
<li>Sandwich</li>
</ol>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:
<ol start="11">
<li>Eleven</li>
<li>Twelve</li>
<li>Thirteen</li>
</ol>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:
<ol reversed>
<li>Apple</li>
<li>Orange</li>
<li>Mango</li>
</ol>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.