Table of Contents
HTML Unordered List or Bulleted List displays elements in bulleted format . We can use unordered list where we do not need to display items in any particular order. The HTML ul tag is used for the unordered list. There can be 4 types of bulleted list:
- disc
- circle
- square
- none
To represent different ordered lists, there are 4 types of attributes in <ul> tag.
<ul> Tag Attributes
HTML <ul> tag specified Unordered list display list of item and its attribute help to change the different type of list.
| Attributes | Value | Description |
|---|---|---|
| type | disk circle square | Disk bullet, Circle bullet, Square bullet default value is “disk”. |
<li> Tag Attributes
HTML <li> tag specified list items and its attribute helps to change the unorder of the list.
| Attributes | Value | Description |
|---|---|---|
| type | disk circle square | Disk bullet, Circle bullet, Square bullet default value is “disk”. |
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title> Unordered List </title>
</head>
<body>
<h2> Unordered List </h2>
<ul>
<li> Codelivly </li>
<li> Rocky </li>
<li> Code </li>
</ul>
</body>
</html>
Output
- Codelivly
- Rocky
- Code
Unorder List Type Attribute
The type attribute is used to change the series type.
| Value | Description |
|---|---|
| type=”disc” | Sets the list item marker to a bullet (default). |
| type=”circle” | Sets the list item marker to a circle. |
| type=”square” | Sets the list item marker to a square. |
| type=”none” | The list items will not be marked. |
The Disc Attribute
The 'Disc' as type – <ul type="disc">. These list items will be marked with small black circles like bullets. This is the default type in unorder lists.
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title> Unordered List Disc Attribute </title>
</head>
<body>
<h2> Unordered List </h2>
<ul type=”disc”>
<li> Harley-Davidson </li>
<li> Ducati</li >
<li> BMW </li>
</ul>
</body>
</html>
Output
- Harley-Davidson
- Ducati
- BMW
The Circle Attribute
The 'Circle' as type – <ul type="circle">. It will display round hollow circles like bullets before list items.
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title> Unordered List Circle Attribute </title>
</head>
<body>
<h2> Unordered List </h2>
<ul type=”circle”>
<li> Harley-Davidson </li>
<li> Ducati </li>
<li> BMW </li>
</ul>
</body>
</html>
Output
- Harley-Davidson
- Ducati
- BMW
The Square Attribute
The 'square' as type – <ul type="square">. It will display filled squares before the list items.
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title> Unordered List Square Attribute </title>
</head>
<body>
<h2> Unordered List </h2>
<ul type=”square”>
<li> Harley-Davidson </li>
<li> Ducati </li>
<li> BMW </li>
</ul>
</body>
</html>
Output
- Harley-Davidson
- Ducati
- BMW
The none Attribute
The 'none' as type – <ul type="none">. This attribute will list the list items but will not put any bullets before them.
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title> Unordered List None Attribute </title>
</head>
<body>
<h2> Unordered List </h2>
<ul type=”none”>
<li> Harley-Davidson </li>
<li> Ducati </li>
<li> BMW </li>
</ul>
</body>
</html>
Output
- Harley-Davidson
- Ducati
- BMW
