THE WORLD'S LARGEST WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

HTML <ol> Tag


Example

2 different ordered lists:

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

<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
Try it yourself »

Definition and Usage

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

Use the <li> tag to define list items.


Browser Support

Element
<ol> Yes Yes Yes Yes Yes

Tips and Notes

Tip: For unordered list, use the <ul> tag.

Tip: Use CSS to style lists.


Differences Between HTML 4.01 and HTML5

The "start" and "type" attributes were deprecated in HTML 4.01, but IS supported in HTML5.

The "reversed" attribute is new in HTML5.

The "compact" attribute is not supported in HTML5.


Attributes

= New in HTML5.

Attribute Value Description
compact compact Not supported in HTML5.
Specifies that the list should render smaller than normal
reversed reversed Specifies that the list order should be descending (9,8,7...)
start number Specifies the start value of an ordered list
type 1
A
a
I
i
Specifies the kind of marker to use in the list

Global Attributes

The <ol> tag also supports the Global Attributes in HTML.


Event Attributes

The <ol> tag also supports the Event Attributes in HTML.


Related Pages

HTML tutorial: HTML Lists

HTML DOM reference: Ol Object

CSS Tutorial: Styling Lists


Default CSS Settings

Most browsers will display the <ol> element with the following default values:

Example

ol {
    display: block;
    list-style-type: decimal;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
    padding-left: 40px;
}
Try it yourself »