Dofactory.com
Dofactory.com

HTML <ol> Tag

The <ol> tag creates an ordered list of items.

In an ordered list the items are sequentially numbered.

The numbers are either numeric, alphabetic, or roman numerals.

Example

#

An <ol> element with cities listed in numeric order.

  1. Amsterdam
  2. London
  3. Berlin
  4. Paris
<ol>
  <li>Amsterdam</li>
  <li>London</li>
  <li>Berlin</li>
  <li>Paris</li>
</ol>
ol = ordered list
li = list item

Using <ol>

The <ol> tag creates an ordered list of items.

List items are added with <li> tags placed inside the <ol> element.

To specify the numbering use the type, start, and reversed attributes.

More Examples

Several <ol> elements, each with their own numbering:

  • The first is alphabetic.
  • The second is numeric, starting at 50, and
  • The third is with roman numbers in reverse order.
  1. Amsterdam
  2. London
  3. Berlin
  4. Paris
  1. Amsterdam
  2. London
  3. Berlin
  4. Paris
  1. Amsterdam
  2. London
  3. Berlin
  4. Paris
<ol type="a">
  <li>Amsterdam</li>
  <li>London</li>
  <li>Berlin</li>
  <li>Paris</li>
</ol>

<ol start="50">
  <li>Amsterdam</li>
  <li>London</li>
  <li>Berlin</li>
  <li>Paris</li>
</ol>

<ol type="I" reversed>
  <li>Amsterdam</li>
  <li>London</li>
  <li>Berlin</li>
  <li>Paris</li>
</ol>

Tip: The start attribute sets the starting value for the list. And reversed reverses the numbering.


Attributes for <ol>

This table lists the <ol> tag attributes.

Attribute Value Description
type 1, A, a, I, i List marker type. Default is 1.
start number Ordered list start value
id   identifier Defines a unique identifier for the ol.
class   classnames Sets one or more CSS classes to be applied to the ol element.
style   CSS-styles Sets the style for the ol element.
data-*   value Defines additional data that can be used by JavaScript.
hidden   hidden Specifies whether the ol element is hidden.
reversed reversed List order (descending or ascending)

For additional global attributes see our global attributes list.


Did you know?

Did you know?

Controlling the list numbering

By default, list items increment consecutively by number or alphabetically.

The item numbers can be changed with the value attribute on the <li> tags.

An <ol> element with custom values.

  1. Paris
  2. Amsterdam
  3. London
  4. Berlin
<ol>
  <li>Paris</li>
  <li value="10">Amsterdam</li>
  <li value="20">London</li>
  <li value="57">Berlin</li>
</ol>

List Tags

The <ol> tag is part of a group of tags that are used to create lists (i.e. lists of items) on web pages. This group is referred to as the List tag group. Together, they allow you to create comprehensive HTML lists.

Below are the list tags.

Element Description
<ul> Creates an unordered, bulleted list
<ol> Creates a numerically or alphabetically ordered list
<li> Defines a list item. Used in <ol> and <ul> elements
<dl> Defines a description list
<dt> Adds a term or name to a <dl> element
<dd> Adds a description of a term or name to a <dl> element

Browser support

Here is when <ol> support started for each browser:

Chrome
1.0 Sep 2008
Firefox
1.0 Sep 2002
IE/Edge
1.0 Aug 1995
Opera
1.0 Jan 2006
Safari
1.0 Jan 2003

You may also like


Last updated on Sep 30, 2023




Guides