How to specify the kind of marker to be used in the list in HTML5 ?

Last Updated : 24 Mar, 2021

There are two types of lists in HTML, the first is an ordered list which is created using the <ol></ol> tag, and the second is an unordered list which is created using the <ul></ul> tag. Both of the lists should have a <li></li> tag to represent the data inside them.

The ordered list represents the data in a countable form. Here the marker is digits. For example:

Item 1
Item 2
Item 3

The unordered list represents the data in an uncountable form. Here the marker is a disc. For example:

Item 1
Item 2
Item 3

The purpose of this article is to show you how you can change the marker without using CSS.

Ordered list markers: There are five types of markers in the ordered list and the markers are specified using the type attribute.

Syntax:

<ol type="Enter type of list"></ol>

Type of list Items: HTML

type Attribute.

Type	Description
type=”1″	List numbered with digits (Default)
type=”A”	List numbered with capital Alphabetic letters
type=”a”	List numbered with small alphabetic letters
type=”I”	List numbered with capital Roman letters
type=”i”	List numbered with small Roman letters

Example 1: Let’s implement ordered list attributes.

HTML

<!DOCTYPE html> 
<html> 
  
<body> 
  <ol> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
    <li>Item 4</li> 
  </ol> 
  <ol type="1"> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
    <li>Item 4</li> 
  </ol> 
  <ol type="A"> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
    <li>Item 4</li> 
  </ol> 
  <ol type="a"> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
    <li>Item 4</li> 
  </ol> 
  <ol type="I"> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
    <li>Item 4</li> 
  </ol> 
  <ol type="i"> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
    <li>Item 4</li> 
  </ol> 
</body> 
    
</html>

Output:

Unordered list markers: There are three types of markers in the unordered list and the markers are specified using the type attribute.

Syntax:

<ul type="Enter type of list"></ul>

Type of list items: HTML

type Attribute

Type	Description
type=”Disc”	For displaying the disc (Default)
type=”Circle”	For display the circle
type=”Square”	For display the Square
type=”Triangle”	For displaying the triangle (Do not use this, not supported by some browsers)

Example 2: Let’s implement unordered list attributes.

HTML

<!DOCTYPE html> 
<html> 
  
<body> 
  <ul> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
    <li>Item 4</li> 
  </ul> 
  <ul type="disc"> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
    <li>Item 4</li> 
  </ul> 
  <ul type="circle"> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
    <li>Item 4</li> 
  </ul> 
  <ul type="square"> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
    <li>Item 4</li> 
  </ul> 
  <ul type="triangle"> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
    <li>Item 4</li> 
  </ul> 
</body> 
    
</html>