webdevlinux - logo Web Dev Linux

HTML Unordered Lists

HTML unordered lists are used to make list referenced by bullets. Here you will learn how to use the unordered list in an HTML document.

Like ordered lists, there are also bullet types in unordered lists. We do not use type attribute on unordered lists because it is not permitted according to the W3C HTML5 standards. They recommend using CSS to change the bullet type.

HTML Unordered lists types HTML Unordered lists

Try the example below

FILE : unordered-lists.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML Unordered Lists</title>
</head>
<body>
<ul>
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
</ul>
<ul style="list-style-type:circle">
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
</ul>
<ul>
	<li>Item 1</li>
	<li style="list-style-type:square">Item 2</li>
	<li>Item 3</li>
</ul>
</body>
</html>

Explanation

Take a look at the explanation of attributes used in the example.

style
The style attribute is used to set inline styles for an element. The value of style attribute should be one or more CSS rules.
"list-style-type:circle"
This is called a CSS rule or CSS declaration. A CSS rule contains a CSS property & value separated with a semi-colon. ( In this case, list-style-type is the CSS property. circle is the property value ).
There are four values we can use in list-style-type, they are : circle, square, disc & none.
style="list-style-type:circle"
This represents a list with the bullet type circles.
style="list-style-type:square"
This represents a list with the bullet type square.
style="list-style-type:disc"
This represents a list with the bullet type disc. This is the default bullet type of unordered lists.
style="list-style-type:none"
This represents a list without a bullet type.

We will learn more about CSS in another lesson.