html ordered lists

HTML Tutorials

HTML Introduction HTML Headings HTML Paragraphs HTML Formatting HTML Links

HTML Images

HTML Tables

HTML Lists

HTML Block & Inline HTML Classes HTML Id HTML Iframes HTML JavScript HTML File Paths HTML Head HTML Layout HTML Responsive

HTML Ordered Lists

Previous Next

The HTML <ol> tag defines an ordered list. An ordered list can be numerical or alphabetical.

Ordered HTML List

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items will be marked with numbers by default:

Example:

<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

Try it Yourself

Ordered HTML List - The Type Attribute

The type attribute of the <ol> tag, defines the type of the list item marker:

Type	Description
type="1"	The list items will be numbered with numbers (default)
type="A"	The list items will be numbered with uppercase letters
type="a"	The list items will be numbered with lowercase letters
type="I"	The list items will be numbered with uppercase roman numbers
type="i"	The list items will be numbered with lowercase roman numbers

Example:

<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

Try it Yourself

Control List Counting

By default, an ordered list will start counting from 1. If you want to start counting from a specified number, you can use the start attribute:

Example:

Try it Yourself

Example:

<ol start="10">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

Try it Yourself

Nested HTML Lists

Lists can be nested (list inside list):

Example:

<ol>
    <li>Coffee</li>
    <li>Tea
        <ol>
            <li>Black Tea</li>
            <li>Green Tea</li>
        </ol>
    </li>
    <li>Milk</li>
</ol>

Try it Yourself

Note: A list item ( <li> ) can contain a new list, and other HTML elements, like images and links, etc.

Use the HTML <ol> element to define an ordered list
Use the HTML type attribute to define the numbering type
Use the HTML <li> element to define a list item
Lists can be nested
List items can contain other HTML elements

Previous Next

Report error:

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail: shaurya.y321@gmail.com

Forum | About

LearnToCode is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using LearnToCode, you agree to have read and accepted our terms of use, cookie and privacy policy.