The <li> type attribute in HTML is used to specify the type of a list items. This attribute also defines the style of the bullet point of the list items.
Syntax:
<li type="1|a|A|i|I|disc|circle|square">
Attribute Values:
For ordered list items:
- 1: It is the default value. It is used to specify the numerical ordered list.
- a: It arranged the list items in lower case letters.
- A: It arrange the list items in the form of upper case.
- i: It arrange the list items in the roman numbers in the form of lower case letters.
- I: It arranged the list in roman numerals in the form of uppercase letters.
For unordered list items:
- disc: It is the default value. It creates a filled circle.
- circle: It creates an unfilled circle.
- square: It creates a filled square.
Note: The <li> type attribute is not supported by HTML 5 Instead of using this attribute we can use CSS list-style-type property.
Example 1:
HTML
<!DOCTYPE html>
<html>
<head>
<title>
HTML li type Attribute
</title>
</head>
<body>
<h1 style = "color: green;">
GeeksforGeeks
</h1>
<h2>
HTML list item type Attribute
</h2>
<p>Sorting Algorithms</p>
<ol>
<li type="a">Merge sort</li>
<li>Quick sort</li>
<li type="I">Insertion sort</li>
</ol>
</body>
</html>
|
Output:
Example 2:
HTML
<!DOCTYPE html>
<html>
<head>
<title>
HTML li type Attribute
</title>
</head>
<body>
<h1 style = "color: green;">
GeeksforGeeks
</h1>
<h2>
HTML li type Attribute
</h2>
<p>Sorting Algorithms</p>
<ul>
<li>Merge sort</li>
<li>Quick sort</li>
<li type="square">Insertion sort</li>
</ul>
</body>
</html>
|
Output:
Supported Browsers: The browser supported by HTML <li> type attribute are listed below:
- Google Chrome
- Internet Explorer
- Firefox
- Safari
- Opera
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
08 Mar, 2022
Like Article
Save Article