HTML code for Ordered List ol tag

Updated on 13 Feb 2012,
Published on 23 Jun 2008

The HTML ol tag for ordered list that we learnt in the previous article renders in web browser according to its start and type attribute. You can also used nested HTML ol tags to display the nested ordered lists in HTML document. You can use different values for type attribute to differentiate the numbering of parent ordered list and nested ordered list. To create tree structure of nested ordered lists you have to place the HTML <ol> and </ol> tag inside the HTML li tag of parent ol tag.

HTML Examples:

You can see the live samples and examples of HTML Basic tags from the following links:

HTML code for simple Ordered List using ol Tag

Code Example 1:

<ol>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
</ol>

Code Example 2:

<ol type="1">
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
</ol>

Code Example 3:

For HTML ordered list using start attribute

<ol start="5" type="1">
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
</ol>

In the Example 3 above, list numbers will start from 5 coz start attribute has value set as 5.

Code Example 4

For HTML ordered list starting with letters

1. Lowercase letters:

<ol type="a">
    <li>list item a</li>
    <li>list item b</li>
    <li>list item c</li>
</ol>

2. Uppercase Letters:

<ol type="A">
    <li>list item A</li>
    <li>list item B</li>
    <li>list item C</li>
</ol>

Code Example 5

For HTML ordered list starting with Roman numerals

1. Lowercase Roman numerals:

<ol type="i">
    <li>list item i</li>
    <li>list item ii</li>
    <li>list item iii</li>
    <li>list item iv</li>
</ol>

2. Uppercase Roman numerals:

<ol type="I">
    <li>list item I</li>
    <li>list item II</li>
    <li>list item III</li>
    <li>list item IV</li>
</ol>

Code Example for HTML ol tag using start and type attribute

<ol start="5" type="i">
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
</ol>

HTML code for ol tag with type="a":

<ol start="5" type="a">
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
</ol>

Output:

You can see the output of above discussed sample code from the following link:

HTML Ordered List Tag

Continue to next tutorial: HTML li Tag for Ordered List Items to learn about HTML ol li tag and its attributes.

Previous Tutorial

Next Tutorial