HTML Unordered Lists | Bulleted Lists
In this tutorial, you’ll learn about HTML unordered lists, what they are, how to make an unordered list in HTML, and their different types with code examples.
What are HTML Unordered Lists?
HTML unordered lists are those type of lists that displays list items marked with bullet points. Unordered lists are also known as bulleted lists.
The example below shows what an unordered list looks like.
However, HTML allows us to make unordered lists marked with squares, and circles instead of bullets. We’ll also see how to do this in this tutorial.
How to Make HTML Unordered Lists
To make an unordered list in HTML, we use a pair of <ul> tags that specify an unordered list. Inside <ul> tags, we use a pair of <li> tags to specify each item of a list.
The following code example shows the syntax of how to make an HTML unordered list:
<!-- HTML Unordered List Example --> <ul> <li>Red</li> <li>Green</li> <li>Blue</li> <li>Orange</li> <li>Yellow</li> </ul>
Remember, all HTML tags must be closed otherwise it will not work and cause a syntax error.
CSS list-style-type Property
We use the CSS list-style-type property for HTML unordered lists to specify what to use instead of bullets. Mean you can change the list item markers. We have 4 types of pre-defined values for unordered lists as shown below.
list-style-type: circle | square | disc | none;
The code examples below will explain all four values of the list-style-type property.
1- HTML Unordered List with Circles
<ul style="list-style-type: circle;"> <li>Red</li> <li>Green</li> <li>Blue</li> <li>Orange</li> <li>Yellow</li> </ul>
Code Output:
2- HTML Unordered List with Squares Example
<ul style="list-style-type: square;"> <li>Red</li> <li>Green</li> <li>Blue</li> <li>Orange</li> <li>Yellow</li> </ul>
Code Output:
3- Discs
<ul style="list-style-type: disc;"> <li>Red</li> <li>Green</li> <li>Blue</li> <li>Orange</li> <li>Yellow</li> </ul>
Discs are similar to bullets.
Note: In the previous versions of HTML, we had a type attribute that is used to specify circles, squares, and discs as list item markers. But now the type attribute is not supported in HTML5.
4- HTML Unordered List without Bullet Points
You can set the value of the type attribute to none to remove the bullets.
<ul style="list-style-type: none;"> <li>Red</li> <li>Green</li> <li>Blue</li> <li>Orange</li> <li>Yellow</li> </ul>
The following image shows the output:
There are some situations when you want to remove bullets from the list of items so this can be helpful. However, there are two other ways to do this. You can learn more about this in the tutorial: How to Make Unordered List without Bullets HTML.
Free Tip: You can use images and icons instead of bullets. To do this, check out CSS list-style-image property.
HTML Nested Unordered List
We can nest HTML unordered lists inside one another. To do this, simply use <ul> tags inside <ul> tags like this in the image below.
The code output will look like this below:
As you can see in the above image, the sub list is indented a little bit right and it is showing circles instead of bullets. And this is by default, so you can see the difference.
You can learn more about nested lists with a lot of examples, and uses here: nested lists in HTML.
That’s it. Now, you know everything about HTML unordered lists. If you have any questions related to this tutorial, just feel free to ask in the comment section below.
Topic: HTML
