Using HTML Nested Ordered Lists

Updated on 13 Feb 2012,
Published on 23 Jun 2008

HTML numbered list that is also known as ordered list in HTML can be nested within other HTML ordered list very easily. HTML Nested ordered lists are useful for displaying the information of gadgets or other electronic or hardware products that have long list of features along with benefits and limitations of different features. You can display the ordered list of features and nested ordered list of benefits and other pros, cons or bottom line of features. You can differentiate the HTML nested ordered lists using different values of type attribute of HTML ol tag. As we discussed in the previous article HTML ol tag for ordered list you can use 1, a, A, i or I as different types of numbering for ordered list or nested ordered lists. For displaying nested ordered list place the HTML ol tag along with its HTML li tag inside the HTML li tag of outer ol tag. Similarly you can insert unlimited number of nested ordered lists in your HTML document.

HTML Examples:

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

HTML code to display Nested Ordered Lists

<ol>
    <li>Main Ordered List item 1</li>
    <li>Below is an example of HTML nested ordered list
        <ol type="a">
            <li>nested list item 1</li>
            <li>nested list item 2</li>
            <li>Sub nested ordered list
                <ol type="i">
                    <li>sub nested list item 1</li>
                    <li>sub nested list item 2</li>
                </ol>
            </li>
        </ol>
    </li>
</ol>

Output:

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

HTML Nested Ordered List Tags

Continue to next tutorial: HTML nested lists ol and ul tags to learn the nesting of HTML ol and ul tags inside the li tag tag of each other.

Previous Tutorial

Next Tutorial