HTML ol tag

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

  1. start – The ordinal value of the first list item. Note that the start attribute was deprecated in previous HTML version but is supported in HTML5
  2. reversed – If present, indicates that the list is a descending list.
  3. type – “1” or “a” or “A” or “i” or “I”
  4. 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>
refresh

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>
refresh

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>
refresh

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>
refresh

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>
refresh

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>
refresh

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>
refresh

Related

Specification

Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit

Comments

Click here to write/view comments