HTML Ordered Lists

Previous

Next

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

Ordered HTML List

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

The list items will be marked with numbers by default:

Example

<!DOCTYPE html>
<html>
<body>

<h2>An ordered HTML list</h2>

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

</body>
</html>

Ordered HTML List – The Type Attribute

The type attribute of the <ol> tag, defines the type of the list item marker:

Type Description

type=”1″	The list items will be numbered with numbers (default)
type=”A”	The list items will be numbered with uppercase letters
type=”a”	The list items will be numbered with lowercase letters
type=”I”	The list items will be numbered with uppercase roman numbers
type=”i”	The list items will be numbered with lowercase roman numbers

Numbers:

<!DOCTYPE html>
<html>
<body>

<h2>Ordered List with Numbers</h2>

<ol type=”1″>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

</body>
</html>

Uppercase Letters:

<!DOCTYPE html>
<html>
<body>

<h2>Ordered List with Letters</h2>

<ol type=”A”>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

</body>
</html>

Lowercase Letters:

<!DOCTYPE html>
<html>
<body>

<h2>Ordered List with Lowercase Letters</h2>

<ol type=”a”>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

</body>
</html>

Uppercase Roman Numbers:

<!DOCTYPE html>
<html>
<body>

<h2>Ordered List with Roman Numbers</h2>

<ol type=”I”>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

</body>
</html>

Lowercase Roman Numbers:

<!DOCTYPE html>
<html>
<body>

<h2>Ordered List with Lowercase Roman Numbers</h2>

<ol type=”i”>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

</body>
</html>

Control List Counting

By default, an ordered list will start counting from 1. If you want to start counting from a specified number, you can use the start attribute:

Example

<!DOCTYPE html>
<html>
<body>

<h2>The start attribute</h2>
<p>By default, an ordered list will start counting from 1. Use the start attribute to start counting from a specified number:</p>

<ol start=”50″>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

<ol type=”I” start=”50″>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

</body>
</html>

Nested HTML Lists

Lists can be nested (list inside list):

Example

<!DOCTYPE html>
<html>
<body>

<h2>A Nested List</h2>
<p>Lists can be nested (list inside list):</p>

<ol>
<li>Coffee</li>
<li>Tea
<ol>
<li>Black tea</li>
<li>Green tea</li>
</ol>
</li>
<li>Milk</li>
</ol>

</body>
</html>

Chapter Summary

Use the HTML <ol> element to define an ordered list
Use the HTML type attribute to define the numbering type
Use the HTML <li> element to define a list item
Lists can be nested
List items can contain other HTML elements

HTML Exercises

Test Yourself With Exercises

Exercise:

Finish the HTML code to make an ordered list.

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

Submit Answer >>

HTML List Tags

Tag Description

<ul>	Defines an unordered list
<ol>	Defines an ordered list
<li>	Defines a list item
<dl>	Defines a description list
<dt>	Defines a term in a description list
<dd>	Describes the term in a description list

Previous

Next