HTML5 <ol> Tag

The HTML <ol> tag is used to represent an ordered list of items, typically rendered as a numbered list.

The only content permitted inside this element is zero or more <li> elements, which in turn often contain nested <ol> or <ul> elements. Both the starting and ending tag are mandatory for this element. The parent of the <ol> tag can be any element that accepts flow content.

There is no limitation to the depth and alternation of nested lists defined with the <ol> and <ul> elements.

The <ol> and <ul> both represent a list of items. They differ in the way that, with the <ol> element, the order is meaningful. As a rule of thumb to determine which one to use, try changing the order of the list items; if the meaning is changed, the <ol> element should be used, else the <ul> is adequate.

The following style is applied to this element by default:

ol {
  display: block;
  list-style-type: decimal;
  margin-before: 1em;
  margin-after: 1em;
  margin-start: 0;
  margin-end: 0;
  padding-start: 40px;
}

Here is an example of using this tag:

<p>Steps to feed your dog:</p>
  <ol>
    <li>Get the food.</li>
    <li>Put the food in a plate.</li>
    <li>Give the plate to your dog.</li>
  </ol>

<!-- Nested Lists -->
<!-- You can also nest <ul> and <ol> -->
<p>Steps to feed your dog:</p>
  <ol>
    <li>Get the food.
        <ol>
          <li>Locate the food packet.</li>
          <li>Tear it open.</li>
          <li>Throw the empty packet in dustbin.</li>
        </ol>
    </li>
    <li>Put the food in a plate.</li>
    <li>Give the plate to your dog.</li>
  </ol>

Attributes

reversed (HTML5)

This Boolean attribute specifies that the items of the list are specified in reversed order.

start (HTML5)

This integer attribute specifies the start value for numbering the individual list items. Although the ordering type of list elements might be Roman numerals, such as XXXI, or letters, the value of start is always represented as a number. To start numbering elements from the letter “C”, use <ol start="3">.

type

Indicates the numbering type:

  • ‘a’ indicates lowercase letters,
  • ‘A’ indicates uppercase letters,
  • ‘i’ indicates lowercase Roman numerals,
  • ‘I’ indicates uppercase Roman numerals,
  • ‘1’ indicates numbers (default).

The type set is used for the entire list unless a different type attribute is used within an enclosed <li> element.

This attribute was deprecated in HTML4, but reintroduced in HTML5. Unless the value of the list number matters (e.g. in legal or technical documents where items are to be referenced by their number/letter), the CSS list-style-type property should be used instead.

Examples

See the Pen HTML ol Tag by Tutorialio (@tutorialio) on CodePen.

Further Reading

  1. Read more about the HTML <ol> element on MDN.
  2. You can also read the HTML <ol> tag reference on W3C.

Reader Comments

1. You can register or login to post a comment. Asking readers to register improves the quality of discussion.

2. As a registered user, you will also get to access features like choosing between a light and dark theme or anything else that we might implement in future.

Follow Us For Updates

FacebookTwitterGoogle+
Go To Top