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