bugl
bugl
HomeLearnPatternsSearch
HomeLearnPatternsSearch

Loading lesson path

Learn/HTML/HTML Foundations
HTML•HTML Foundations

HTML Ordered Lists

Concept visual

HTML Ordered Lists

Pointer walk
two pointers
leftright102132436485116
left=0
right=6
1
3

Start at both ends

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

<ol>

Formula

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

</ol>

Formula

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

Numbers:

<ol type="1">

Formula

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

</ol>

Uppercase Letters

Uppercase Letters:

<ol type="A">

Formula

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

</ol>

Lowercase Letters

Lowercase Letters:

<ol type="a">

Formula

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

</ol>

Formula

Roman Numbers - Uppercase

Uppercase Roman Numbers:

<ol type="I">

Formula

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

</ol>

Formula

Roman Numbers - Lowercase

Lowercase Roman Numbers:

<ol type="i">

Formula

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

</ol>

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

<ol start="50">

Formula

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

</ol>

Nested HTML Lists

Lists can be nested (list inside list):

Example

<ol>

Formula

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

<ol>

Formula

< li > Black tea </li >
< li > Green tea </li >

</ol> </li>

Formula

< li > Milk </li >

</ol>

Note:

A list item ( <li> ) can contain a new list, and other HTML elements, like images and links, etc.

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

Previous

HTML Unordered Lists

Next

HTML Other Lists