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

We will learn how to create an unordered list with square bullets using HTML and CSS. This simple yet essential technique enhances the visual appeal of your web pages. We will use the CSS list-style-type: square property to achieve this effect.

The list-style-type property in CSS specifies the appearance of the list item marker. It can be used to create different styles for list bullets, such as discs, circles, squares, or custom counter styles.

Syntax:

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

Step-by-Step Guide to Creating an Unordered List with Square Bullets

To create an unordered list with square bullets, follow these steps:

1. Create the HTML Structure: Use <ul> (unordered list) and <li> (list item) tags to create your list.
2. Apply the CSS Style: Use the list-style-type: square; property on the <ul> element to change the bullet style to squares.

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.

Output:

Creating an unordered list with square bullets using HTML and CSS is a simple yet effective way to enhance the appearance of your lists.