content logo

Learn HTML:

Html ol tag

The HTML <ol> tag represents an ordered list in an HTML document.

An ordered list is a list where the items have been ordered intentionally. The main point of an ordered list is that the list items need to be ordered in order to convey the intended meaning. Changing the order would change the meaning of the list (or document). An example could be a list of marathon runners, listed in order of their finishing times.

The basic tag is written like this <ol></ol> with the list item inserted between the opening and closing tags. The <ol> tag is used in conjunction with the <li> tag. The <ol> element represents the actual list, while the <li> tag represents each list item. So, each list item gets it's own <li>.

An ordered list can be ordered using decimal numbers (eg, 1. 2. 3. ... etc), lower case latin alphabet (eg. a. b. c. ... etc), upper case latin alphabet (eg. A. B. C. ... etc), lower case roman numerals (eg. i. ii. iii. ... etc), or upper case roman numerals (eg. I. II. III. ... etc). You can specify whether the list is ascending (eg, 1. 2. 3. ... etc) or descending (3. 2. 1. ... etc). You can also specify that the list starts at a particular number/numeral/letter. You can also use the CSS list-style-type property to change the marker type.

Example

These three examples demonstrate different ways of using the <ol> tag.

<ol>
<li>Apples</li>
<li>Oranges</li>
</ol>
<ol type="a" start="5">
<li>Apples</li>
<li>Oranges</li>
</ol>
<ol start="1001" reversed>
<li>Apples</li>
<li>Oranges</li>
</ol>

Attributes Specific to the <ol> Element

Attribute Description
reversed Specifies that the list is a descending list (...3, 2, 1).

This is a boolean attribute. If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace (i.e. either reversed or reversed="reversed").

Possible values:

     -  [Empty string]

     -  reversed

start Specifies the count of the first list item. Must be an ordinal number. Although this attribute was deprecated in HTML 4.01, it is a valid attribute in HTML 5.
type Specifies the kind of marker to use in the list. If specified, this attribute must have one of the following values:
Value Description
1 Represents decimal numbers (eg. 1. 2. 3. ... etc)
a Represents lower case latin alphabet (eg. a. b. c. ... etc)
A Represents upper case latin alphabet (eg. A. B. C. ... etc)
i Represents lower case roman numerals (eg. i. ii. iii. ... etc)
I Represents upper case roman numerals (eg. I. II. III. ... etc)

Note: The CSS list-style-type property is often more appropriate for specifying the marker type.

Also note: Although this attribute was deprecated in HTML 4.01, it is a valid attribute in HTML 5.

#HTML Ol Example #HTML Ol Code #HTML Ol Tutorial