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

Last Updated : 23 Jul, 2025

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:

  1. Item 1
  2. Item 2
  3. 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.

    TypeDescription
    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.

      TypeDescription
      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>


      Output:

      Note: Here the triangle type is not supported by the browser that's why it is showing disc instead of a triangle.

Comment

Explore