totn HTML

HTML: <ol> tag

This HTML tutorial explains how to use the HTML element called the <ol> tag with syntax and examples.

Description

The HTML <ol> tag defines an ordered list in the HTML document. This tag is also commonly referred to as the <ol> element.

Syntax

In HTML, the syntax for the <ol> tag is:

<body>
<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>
</body>

Sample Output

Attributes

In addition to the Global Attributes, the following is a list of attributes that are specific to the <ol> tag:

Attribute Description HTML Compatibility
compact Boolean value indicating that the list should be rendered in a compact style Deprecated, use CSS
reversed Boolean value indicating that the items are listed in reverse order HTML5
start Integer value indicating the start value for the list items HTML5
type Character value indicating numbering style for the list. It can be any of the following values:
a - means lowercase
A - means uppercase
i - means lowercase Roman numerals
I - means uppercase Roman numerals
1 - means numbers
 Deprecated, use CSS

Note

  • The HTML <ol> element is found within the <body> tag.
  • The <ol> tag is made up of <li> tags.
  • Use the <ol> tag when the list items have numeric, meaningful ordering.
  • You can nest <ol>, <ul> and <menu> lists.

Browser Compatibility

The <ol> tag is compatible with the following browsers:

  • Chrome
  • Android
  • Firefox (Gecko)
  • Firefox Mobile (Gecko)
  • Internet Explorer (IE)
  • Edge Mobile
  • Opera
  • Opera Mobile
  • Safari (WebKit)
  • Safari Mobile

Example

We will discuss the <ol> tag below, exploring examples of how to use the <ol> tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict, and XHTML 1.1.

  • HTML5
  • HTML4
  • XHTML

HTML5 Document

If you created a new web page in HTML5, your <ol> tag might look like this:

<!doctype html>
<html>

<head>
<meta charset="UTF-8">
<title>HTML5 Example by www.techonthenet.com</title>
</head>

<body>
<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
  <li>Fourth item</li>
</ol>
</body>

</html>

In this HTML5 Document example, we have created an ordered list using the <ol> tag that contains four list items found within the four <li> tags.

HTML 4.01 Transitional Document

If you created a new web page in HTML 4.01 Transitional, your <ol> tag might look like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HTML 4.01 Transitional Example by www.techonthenet.com</title>
</head>

<body>
<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
  <li>Fourth item</li>
</ol>
</body>

</html>

In this HTML 4.01 Transitional Document example, we have created an ordered list using the <ol> tag that contains four list items found within the four <li> tags.

XHTML 1.0 Transitional Document

If you created a new web page in XHTML 1.0 Transitional, your <ol> tag might look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XHMTL 1.0 Transitional Example by www.techonthenet.com</title>
</head>

<body>
<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
  <li>Fourth item</li>
</ol>
</body>

</html>

In this XHTML 1.0 Transitional Document example, we have created an ordered list using the <ol> tag that contains four list items found within the four <li> tags.

XHTML 1.0 Strict Document

If you created a new web page in XHTML 1.0 Strict, your <ol> tag might look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XHTML 1.0 Strict Example by www.techonthenet.com</title>
</head>

<body>
<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
  <li>Fourth item</li>
</ol>
</body>

</html>

In this XHTML 1.0 Strict Document example, we have created an ordered list using the <ol> tag that contains four list items found within the four <li> tags.

XHTML 1.1 Document

If you created a new web page in XHTML 1.1, your <ol> tag might look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XHTML 1.1 Example by www.techonthenet.com</title>
</head>

<body>
<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
  <li>Fourth item</li>
</ol>
</body>

</html>

In this XHTML 1.1 Document example, we have created an ordered list using the <ol> tag that contains four list items found within the four <li> tags.

Share on: