HTML OL- Ordered List

If you want to display a list of items but with numbering then you need HTML OL. The numbering does not express the actual ordering of the listed items. It is just a way to display the list of items with some sequence number line serial number or alphabetical orders.  The List elements are displayed with sequence of numbers, alphabets or roman numerals.  

Syntax of HTML OL

An ordered list in a web page is created by using <OL ></OL> tags. All the strings or values in the list must be included in this <OL> Tag within <LI></LI> List item tags.

<OL attribute-value pairs>
<LI>list item 1</LI>
<LI>List Item 2</LI>
</OL>

Features of HTML OL

  • <OL> is a paired tag. The opening and closing tags are essential to mention to create an ordered list. All elements created with <LI></LI> must be enclosed within <OL> and </OL>.
  • Multiple ordered lists can be added in a web page. If you need to manipulate the HTML OL within a script, each ordered list must be given a unique ID.
  • The ordered and unordered lists can be mixed and matched.  Multiple ordered lists cane be added under unordered lists and vice versa.
  • Any number of list elements can be added using <LI></LI> paired tags.
  • The formatting of the ordered list can be done by setting the relevant attributes in <OL> opening tag.
  • An individual element can be separately formatted using attributes in individual <LI> tags.

Attributes of HTML OL list

The ordered list has following attributes to be applied to all the list elements.

ID

This attribute value gives identification to an ordered list. An alphanumeric string is given as the identification of an ordered list. The ID value should be unique for a web page. This ID is used in a script to manipulate it on the basis of application logic.

CLASS

This attribute is used to associate an ordered list with a class defined in a style sheet associated with the page or website. The style sheet element specifies the consistent style for multiple lists in a web page.

STYLE

If you want to add additional styling to an ordered list, style attribute is used. You can set styles in a string form with CSS element and value pairs separated by semicolons.

TITLE

Title attribute is used to set tooltip text for an ordered list. When the user rests the mouse cursor on an ordered list, a value assigned to TITLE attribute appears in a small outlined box.

DIR

DIR means direction. It is defined to set where the numbering will appear in the HTML OL. This attribute is used set the direction of the non aligned ordered list. Possible values are LTR for left to right or RTL for right to left.

TYPE

This attribute is used to define the type of bullet to be used for an ordered list. The Type attribute can have uppercase alphabets(A), lowercase alphabets(a), uppercase roman(I),  lowercase roman(i) and numeric(1 and default).

START

This attribute is used to specify the starting index of the ordered list. By default the values start from 1. This value is always given in numeric even if the type of list is Alphabetic or Roman.

Example of HTML OL

<TITLE> Welcome to CSVeda.com </TITLE>
<HTML>
<BODY >
<H3 ALIGN="CENTER">Using Ordered List in Websites</H3>
<OL Type="1">
<LI>Programming in C</LI>
<LI>Programming in Python</LI>
<LI>Java Programming</LI>
</OL>
<OL Type="A" DIR="RTL" TITLE="Right Aligned List with verdana font" STYLE="font-family:Verdana">
<LI>Operating Systems</LI>
<LI>Computer Networks</LI>
<LI>Artificial Intelligence</LI>
</OL>
<OL Type="i" START="11">
<LI STYLE="font-family:Calibri">Oracle</LI>
<LI STYLE="font-family:Verdana">MySQL</LI>
<LI STYLE="font-family:Times New Roman">PostGreSQL</LI>
</OL>
</BODY>
</HTML>
HTML OL Example