HTML Lists are used to organize content by providing them as lists where every item is listed in a new line. A Bullet list is a special type used to make the items icon disc, circle, and square which provides a better user experience. The bullet lists are created using the Unordered List element of the HTML.
HTML Bullet List Syntax
The syntax of the bullet list is below. Bullet lists use circles as bullet points by default.
<ul>
<li>Ankara</li>
<li>İstanbul</li>
<li>Çanakkale</li>
...
</ul>There is no restriction on the count of the list items. Then can be added inside the <ul> using the <li> like above.
Disc Bullet List
The bullet list provides different bullet points. The disc bullet list is the default type. Alternatively, the style="list-style-type:disc" can be used to make the bullet point as a filled circle or disc.
<html>
<body>
<ul>
<li>Ankara</li>
<li>İstanbul</li>
<li>Çanakkale</li>
</ul>
<ul>
<li style="list-style-type:disc">Ankara</li>
<li style="list-style-type:disc">İstanbul</li>
<li style="list-style-type:disc">Çanakkale</li>
</ul>
</body>
</html>
Circle Bullet List
The bullet point can be set as a circle actually an empty circle by using the style="list-style-type:circle" attribute for every list item like below.
<html>
<body>
<ul>
<li style="list-style-type:circle">Ankara</li>
<li style="list-style-type:circle">İstanbul</li>
<li style="list-style-type:circle">Çanakkale</li>
</ul>
</body>
</html>
Square Bullet List
The bullet point can be set as a square by using the style="list-style-type:square" attribute for every list item like below.
<html>
<body>
<ul>
<li style="list-style-type:square">Ankara</li>
<li style="list-style-type:square">İstanbul</li>
<li style="list-style-type:square">Çanakkale</li>
</ul>
</body>
</html>
Mixed Bullet List (Disc, Circle, and Square Together)
The disc, circle, and square bullet types can be used in a single list in a mixed way. There is no restriction on them. Simple set the list item style to the related bullet type like below. In the following example, we use disc, circle, and square bullet types together in a mixed way.
<html>
<body>
<ul>
<li style="list-style-type:circle">Ankara</li>
<li style="list-style-type:disc">İstanbul</li>
<li style="list-style-type:square">Çanakkale</li>
</ul>
</body>
</html>
Nested Bullet List
Bullets can be also used in a nested way where parent and child bullets can be set of different types. In the following example, we use a square bullet type for parent list items and a circle for the child list items.
<html>
<body>
<ul>
<li style="list-style-type:square">Ankara</li>
<li style="list-style-type:square">İstanbul</li>
<ul>
<li style="list-style-type:circle">Kadıköy</li>
<li style="list-style-type:circle">Şişli</li>
<li style="list-style-type:circle">Belikdüzü</li>
</ul>
<li style="list-style-type:square">Çanakkale</li>
</ul>
</body>
</html>