HTML ol tag (<ol>) can be used to create ordered list. It can contain multiple list items using tag li (<li>) and it can be styled using css. Also note that there can be nested lists (using ul and/or ol) also.
Attributes
start– The ordinal value of the first list item. Note that the start attribute was deprecated in previous HTML version but is supported in HTML5reversed– If present, indicates that the list is a descending list.type– “1” or “a” or “A” or “i” or “I”- compact – Obsolete
CSS properties specific to lists
- list-style
- list-style-type
- list-style-position
Example – ol tag with default list-style-type
<style>
ol {
background-color: lightgreen;
width: 200px;
}
li {background-color:lightgray;}
</style>
<ol>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ol>Example – ol tag with lower-roman list-style-type
<style>
ol {
background-color: lightgreen;
width: 200px;
list-style-type: lower-roman;
}
li {background-color:lightgray;}
</style>
<ol>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ol>Example – ol tag with outside list-style-position
Property list-style-position has default value outside.
<style>
ol {
background-color: lightgreen;
width: 200px;
list-style-position: outside; /* default */
}
li {background-color:lightgray;}
</style>
<ol>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ol>Example – ol tag with inside list-style-position
<style>
ol {
background-color: lightgreen;
width: 200px;
list-style-position: inside;
}
li {background-color:lightgray;}
</style>
<ol>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ol>Example – ol tag with reduced left padding
<style>
ol {
background-color: lightgreen;
width: 200px;
list-style-position: outside;
padding: 0 0 0 20px;
}
li {background-color:lightgray;}
</style>
<ol>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ol>Example – ol tag with custom start value
<style>
ol {
background-color: lightgreen;
width: 200px;
}
li {background-color:lightgray;}
</style>
<ol start="11">
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ol>Example – ol tag with reversed order
<style>
ol {
background-color: lightgreen;
width: 200px;
}
li {background-color:lightgray;}
</style>
<ol reversed>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ol>Related
- CSS list-style - shorthand for list marker type, image and position
- CSS list-style-type - specify marker (disc, square, numeric, etc.) for a list
- CSS list-style-position - specify if list markers will be outside or inside
- CSS list-style-image - use image as marker in list
- HTML li tag
- HTML ul tag
