HTML Unordered List
HTML unordered list is a collection of related items that are listed with no special order or sequence.
This list is created by using HTML <ul> tag. Each item in the list is marked with a bullet. Each item starts with <li> tag.
Look at the example below to understand how to use HTML Unordered List:
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Unordered List </title>
</head>
<body>
<h2> Unordered List </h2>
<ul>
<li> Harley-Davidson </li>
<li> Ducati </li>
<li> BMW </li>
</ul>
</body>
</html>
Output
- Harley-Davidson
- Ducati
- BMW
Unorder List Type Attribute
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
Browser Support
 Edge |
 Chrome |
 Firefox |
 Opera |
 Safari |
|
|---|---|---|---|---|---|
<ul> |