InfoHeap
Tech tutorials, tips, tools and more
Navigation
  • Home
  • Tutorials
    • CSS tutorials & examples
    • CSS properties
    • Javascript cookbook
    • Linux/Unix Command Line
    • Mac
    • PHP
      • PHP functions online
      • PHP regex
    • WordPress
  • Online Tools
    • Text utilities
    • Online Lint Tools
search

HTML tags

  • audio
  • input checkbox
  • label
  • li
  • ol
  • pre
  • template
  • ul
  • video
 
  • Home
  • > Tutorials
  • > HTML
  • > HTML tag

HTML ol tag

on Mar 12, 2016

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 done
try it online

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 done
try it online

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 done
try it online

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 done
try it online

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 done
try it online

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 done
try it online

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 done
try it online

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

Specification

  • W3C HTML5 ol (ordered list) specification

Suggested posts:

  1. HTML ul tag
  2. CSS list-style – shorthand for list marker type, image and position
  3. HTML li tag
  4. CSS list-style-position – specify if list markers will be outside or inside
  5. CSS list-style-type – specify marker (disc, square, numeric, etc.) for a list
  6. HTML pre tag tutorial
  7. Css position property – static, relative, absolute and fixed positioning
  8. CSS list-style-image – use image as marker in list
Share this article: share on facebook share on linkedin tweet this submit to reddit
Posted in Tutorials | Tagged HTML tag, Tutorials

Follow InfoHeap

facebook
twitter
googleplus
  • Browse site
  • Article Topics
  • Article archives
  • Recent Articles
  • Contact Us
  • Omoney
Popular Topics: AngularJS | Apache | AWS and EC2 | Bash shell scripting | Chrome developer tools | CSS | CSS cookbook | CSS properties | CSS Pseudo Classes | CSS selectors | CSS3 | CSS3 flexbox | Devops | Git | HTML | HTML5 | Java | Javascript | Javascript cookbook | Javascript DOM | jQuery | Linux | Linux/Unix Command Line | Mac | Mac Command Line | Mysql | Networking | Node.js | Online Tools | PHP | PHP cookbook | PHP Regex | Python | Python array | Python cookbook | SEO | Site Performance | SSH | Ubuntu Linux | Web Development | Webmaster | Wordpress | Wordpress customization | Wordpress How To | Wordpress Mysql Queries

Copyright © 2022 InfoHeap.

Powered by WordPress