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.


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:

TypeDescription
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

Related:

HTML Lists

HTML Unordered Lists

HTML Tables

HTML picture Element

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.


0 Comments

Leave a Reply

Avatar placeholder