In Easy Steps Articles

January 21, 2022

How to create ordered lists in an HTML document

In HTML, ordered lists are created with <ol> </ol> tags, which provide a container for list items. As with unordered lists, each list item can be created using <li> </li> tags to enclose the item, or optionally just using <li> to precede the item – either form of <li> element validates as correct HTML. An ordered list <ol> element can contain numerous list item <li> elements.

The automatic numbering that differentiates ordered list items from regular text may be one of these six numbering types:

  • Decimal – traditional numerals (the default style).
  • Roman – classical numerals.
  • Latin – traditional alphabetical lettering.
  • Greek – classical alphabetical lettering.
  • Georgian – traditional Georgian numbering.
  • Armenian – traditional Armenian numbering.

A style rule can specify any of the above numbering types to the list’s list-style-type property with the following values:








Additionally, a none value can be specified to suppress numbering. List item numbering will normally begin at 1, but a different start point can be specified to a start attribute in the <ol> tag.

1) To insert an ordered list that will display default numbering within the body section of your HTML document:

<li>Cascading Style Sheets</li>

2) To insert an ordered list that will display Roman numbering:

<ol style=”list-style-type:upper-roman”>
<li>C Programming</li>
<li>C++ Programming</li>
<li>C# Programming</li>

3) To insert an ordered list that will begin numbering at one hundred (100):
<ol start=”100” >

4) Save your HTML document, then open it in your browser to see the ordered list numbering.









Get more tips like this in
HTML in easy steps, 9th edition


192 pages
By Mike McGrath
ISBN: 9781840788761

Sign up to our


Our newsletters inform you of new and forthcoming titles, handy tips, and other updates and special offers. You can opt out anytime.

"*" indicates required fields

By In Easy Steps Team


We are sorry to let you go...

Would you mind giving us your feedback or reason of cancelling the subscription?


"*" indicates required fields

Reason For Cancellation*