HTML Ordered Lists

HTML Tutorial

HTML Forms

HTML Graphics

HTML Media

HTML API

Html List Types

Ordered HTML List

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

The HTML <ol> tag is used to define the ordered list. An ordered list can be numerical or alphabetical.

Ordered HTML List – The Type Attribute

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

				
					<!DOCTYPE html>
<html>
<body>
<p>Ordered List with Numbers</p>
<ol type="1">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>  

<p>Ordered List with Lowercase Letters</p>
<ol type="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>  

<p>Ordered List with Roman Numbers</p>
<ol type="I">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>  

<p>Ordered List with Lowercase Roman Numbers</p>
<ol type="i">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>  

</body>
</html>

Output:

Ordered List with Numbers

  1. Coffee
  2. Tea
  3. Milk

Ordered List with Lowercase Letters

  1. Coffee
  2. Tea
  3. Milk

Ordered List with Roman Numbers

  1. Coffee
  2. Tea
  3. Milk

Ordered List with Lowercase Roman Numbers

  1. Coffee
  2. Tea
  3. Milk

HTML Unordered Lists

The HTMLtag denotes the unordered (bulleted) list.

Unordered HTML List – Choose List Item Marker

The CSS list-style-type property is used to define the style of the list item marker. It can have one of the following values:

Value Description

Disc: Sets the list item marker to a bullet (default)

Circle: Sets the list item marker to a circle

Square: Sets the list item marker to a square

None: The list items will not be marked

Example:

				
					<!DOCTYPE html>
<html>
<body>
<p>Unordered List with Disc Bullets</p>
<ul style="list-style-type:disc;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>  

<p>Unordered List with Circle Bullets</p>
<ul style="list-style-type:circle;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>  
  
<p>Unordered List with Square Bullets</p>
<ul style="list-style-type:square;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<p>Unordered List without Bullets</p>
<ul style="list-style-type:none;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>  
</body>
</html>

Output:

Unordered List with Disc Bullets

  • Coffee
  • Tea
  • Milk

Unordered List with Circle Bullets

  • Coffee
  • Tea
  • Milk

Unordered List with Square Bullets

  • Coffee
  • Tea
  • Milk

Unordered List without Bullets

  • Coffee
  • Tea
  • Milk