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:

<ol>
<li>HTML</li>
<li>Cascading Style Sheets</li>
<li>JavaScript</li>
</ol>

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>
</ol>

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

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

£11.99

192 pages
By Mike McGrath
ISBN: 9781840788761

Sign up to our

Newsletter

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

Share