HTML Ordered list

In HTML, an ordered list is used to group related items. The ordered list can be created by using the <ol> tag. By default, ordered list items are marked with numbers, such as 1, 2, 3.

Syntax

<ol>
    <li>Item 1</li>
    <li>Item 2</li>
</ol>

Example

<html>
<head>
    <title>HTML Ordered list</title>
</head>
<body>
    <ol>
        <li>Apple</li>
        <li>Orange</li>
        <li>Grapes</li>
    </ol>  
</body>
</html>

Output

Apple
Orange
Grapes

Attributes of an ordered list

The Start attribute

With the start attribute, you can set the number of the first element in the list. For example, if you wanted to start your list with the number 10, set the start attribute to 10.

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

Output

Coffee
Tea
Milk

The type attribute (Deprecated)

The type attribute is used to set the type of listing (number, letter etc..) to be used in the listing.

This attribute has been deprecated: use the CSS list-style-type property instead.

Number

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

Output

1. Coffee
2. Tea
3. Milk

Uppercase letter

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

Lowercase letter

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

Uppercase Roman number

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

Lowercase Roman letter

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

Unordered List
Description List

A list is not limited to text items. List items can contain a new list (Nested List), other HTML elements (input tag, p tag, h1-h6 tags), links, images etc.