An unordered list is a great way to organize a set of related items. One common way unordered lists are used is to make horizontal or vertical navigation bars — an essential feature of almost every website.
In this topic, you will learn about the different unordered list types. You'll see how unordered lists are structured and find out how to create them. Let's get started!
Unordered list
The <ul> HTML element is used to define an unordered list and also enables you to specify its type. To create an individual list item, you need to use the <li> element. <li> elements must be placed between the <ul> start tag and </ul> end tag.
There are four different unordered list types:
disk: bullets styled as a solid circle (default)
circle: bullets styled as a circle outline
square: bullets styled as a solid square
none: bullets are invisible
Disk
Let's start with the disk type, which is the default unordered list style. Note that the same piece of code will be used throughout this topic to demonstrate how each type of unordered list is defined.
Because it's the default style, to create a disk type list, you simply need to insert a <ul> tag and place <li> tags in between. The code snippet below demonstrates how to do this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>Shopping list</h2>
<ul>
<li>Bread</li>
<li>Milk</li>
<li>Meat</li>
</ul>
</body>
</html>And the output looks like this:
Circle
The circle type is next. As previously mentioned, the difference between the disk and circle is that the disk has a solid style, and the circle is an outline. To make a circle type list, you apply the CSS property list-style-type:circle; to the <ul> tag. You can see how this is done in the following code snippet:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>Shopping list</h2>
<ul style="list-style-type:circle;">
<li>Bread</li>
<li>Milk</li>
<li>Meat</li>
</ul>
</body>
</html>The result can be seen below:
Square
Great job! Now, let's use the square style! The rule is the same: you need to apply the correct CSS property to the <ul> tag. So, to make a square style list, the list-style-type:square; property is used. Take a look at the following example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>Shopping list</h2>
<ul style="list-style-type:square;">
<li>Bread</li>
<li>Milk</li>
<li>Meat</li>
</ul>
</body>
</html>This is the output:
None
Last but not least is the list type that makes bullet points invisible! You're likely to use this type often, so let's see how it's done.
To prevent the bullet points from displaying, all you have to do is apply the CSS property list-style-type:none; to the <ul> tag. Check out the code snippet below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>Shopping list</h2>
<ul style="list-style-type:none;">
<li>Bread</li>
<li>Milk</li>
<li>Meat</li>
</ul>
</body>
</html>Output:
Conclusion
In this topic, you learned about unordered lists. You discovered that there are four different unordered list types: disk, circle, square, and none (invisible). And that applying these types via CSS properties changes the way a list's bullet points look. Now, you can style your list in the way you want! Congratulations! Let's put this knowledge to the test!