How to create an unordered list with square bullets in HTML ?

In this article, we will see how to create an unordered list with square bullets using HTML. To create an unordered list with square bullets, we will use the CSS list-style-type: square property.

The list-style-type property in CSS specifies the appearance of the list item marker (such as a disc, character, or custom counter style).

Syntax:

list-style-type: disc | circle | square | decimal | lower-roman | upper-roman |
lower-greek | lower-latin | upper-latin | lower-alpha | upper-alpha | none | inherit;

Example: In the below example, we will create an unordered list of items using <ul> and <li> tags and add CSS list-style-type: square style on <ul> element to make square bullets.

HTML

<!DOCTYPE html>

<html lang="en">
 
<head>

    <title>

        How to create an unordered list 

        with square bullets in HTML?

    </title>

</head>
 
<body>

    <h1 style="color:green;">

        GeeksforGeeks

    </h1>

    <h3>

        How to create an unordered list 

        <br>with square bullets in HTML?

    </h3>
 
    <p>Web Development Technologies - </p>

    <ul style="list-style-type:square">

        <li>HTML</li>

        <li>CSS</li>

        <li>JavaScript</li>

        <li>jQuery</li>

    </ul>

</body>
 
</html>