Skip to content
Related Articles

Related Articles

Improve Article

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:

  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.

      Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




      My Personal Notes arrow_drop_up
Recommended Articles
Page :