HTML Bullet List Tutorial with Examples


The Bullet list is an old term used to express the HTML unordered list. Unordered list contains single or multiple items where these item lines start with a bullet. HTML bullet symbols can be changed into different symbols like Circle or Square easily by using styling.

Create HTML Bullet List

The HTML unordered list can be used to create a bullet list. The default item style is the bullet.

<html>
<body>

<h2>Disc Bullets</h2>

<ul>
<li>Turkey</li>
<li>USA</li>
<li>Germany</li>
<li>England</li>
</ul>

</body>
</html>
Create HTML Bullet List

Create HTML Disc Bullet List

Disc style is another alternative for the HTML bullet list we will use the style property of list by setting the list-style-type attribute as disc.

<html>
<body>

<h2>Disc Bullets</h2>

<ul style="list-style-type:disc;">
<li>Turkey</li>
<li>USA</li>
<li>Germany</li>
<li>England</li>
</ul>

</body>
</html>
Create HTML Disc Bullet List

Create HTML Circle Bullet List

Alternatively, we can create bullet lists by using Circle style. We will set the style as the circle like below.

<html>
<body>

<h2>Disc Bullets</h2>

<ul style="list-style-type:circle;">
<li>Turkey</li>
<li>USA</li>
<li>Germany</li>
<li>England</li>
</ul>

</body>
</html>
Create HTML Circle Bullet List

Create HTML Square Bullet List

A square bullet list is another alternative. We will set the unordered list-style as the square in the following example.

<html>
<body>

<h2>Disc Bullets</h2>

<ul style="list-style-type:square;">
<li>Turkey</li>
<li>USA</li>
<li>Germany</li>
<li>England</li>
</ul>

</body>
</html>
Create HTML Square Bullet List

LEARN MORE  HTML li List Tag Tutorial with Examples

Leave a Comment