HTML Ordered Lists

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

HTML Ordered Lists or Numbered List shows elements in numbered format. The HTML ol tag is used for ordered list. We can use ordered list to address items either in numerical order format or alphabetical order format, or any format where an order is stressed.

In this article, you will learn-

1 Ordered HTML List
2 Ordered HTML List – The Type Attribute
3 Numbers:
4 Uppercase Letters:
5 Lowercase Letters:
6 Uppercase Roman Numbers:
7 Lowercase Roman Numbers:
8 Control List Counting
9 Nested HTML Lists
10 Chapter Summary
11 HTML List Tags

Ordered HTML List

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

The list items will be set apart with numbers by default:

Example

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

Ordered HTML List – The Type Attribute

The sort 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:

<ol type="1">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Uppercase Letters:

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

Lowercase Letters:

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

Uppercase Roman Numbers:

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

Lowercase Roman Numbers:

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

Control List Counting

By default, an ordered list will begin counting from 1. In the event that you need to begin counting from a predetermined number, you can use the start attribute:

Example

<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Nested HTML Lists

Lists can be nested (list inside list):

Example

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

Note: A list item (<li>) can contain another list, and other HTML elements, similar to pictures and links, and so on

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 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

HTML Background Images

Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your photos and creative projects with us.