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>