HTML.co.uk

While surfing the web we come across different types of data. Some of them are presented in the form of paragraphs while some information is presented in the form of lists. Lists provide the content more visibility, readability and understandability. It also improves the overall look of the web site. In HTML documents different types of lists can be inserted. There are countless number of designs and styles, which can be applied to a list. Broadly speaking, HTML lists can be classified into three main categories. One is ordered lists (also known as numbered lists), second one is unordered lists (also known as bulleted lists) and the last one is glossary lists (also known as definition lists).

Ordered lists are those in which each list item is numbered in either an ascending order or in descending order. The HTML tags which make up the ordered lists are <OL>……</OL>.

Example code of ordered list:

<OL>
<LI> Content </LI>
<LI> Resume </LI>
<LI> E-Book </LI>
<LI> Blogs </LI>
<LI> SEO </LI>
<LI> SMO </LI>
</OL>

The <LI> tag is always used within the <OL> tag. It represents the list items which have to be displayed. It’s not necessary that the numbered lists always put numerical in front of the each list item. You can also use alphabets and roman signs to them. In order to add these you can use the ‘TYPE’ attribute with <OL>. You can also start a list directly from any number or any alphabet by using ‘START’ attribute. Below is a comprehensive example explaining how to create different kinds of ordered lists.

HTML Code:

<OL>
<LI> Content </LI>
<LI> Resume </LI>
</OL>

<OL TYPE=”A”>
<LI> Content </LI>
<LI> Resume </LI>
</OL>

<OL TYPE=”a” START=”b”>
<LI> Content </LI>
<LI> Resume </LI>
</OL>

<OL TYPE=”i”>
<LI> Content </LI>
<LI> Resume </LI>
</OL>

<OL TYPE=”I” START=”!!!”>
<LI> Content </LI>
<LI> Resume </LI>
</OL>

It is clear that:

1) “1” specifies the standard Arabic numerals to be used in the ordered list.
2) “a” specifies the lowercase alphabets to be used in the ordered list.
3) “A” specifies the uppercase alphabets to be used in the ordered list
4) “i” specifies the lowercase Roman numerals to be used in the ordered list.
5) “I” specifies the uppercase Roman numerals to be used in the ordered list.

So far we have seen that the ordered lists numbers the list items in a flow like 1, 2, 3, 4 etc. or a, b, c….etc. but we can also break the sequence and directly jump to any number or alphabet of our choice. For this purpose we have to use ‘VALUE’ attribute with the <LI> tag. For example:

<OL TYPE=”1” START=”2”>
<LI> Content </LI>
<LI> Resume </LI>
<LI VALUE=”10”> Blogs
<LI> SMO
</OL>