How to Make an Unordered List in HTML With Square Bullets?

The unordered list with square bullets is utilized to enhance the presentation of the webpage content. It is mostly used to change the default styling for the bullet making it more unique and eye-catching. The square bullet can be utilized with each list item or option while creating survey forms, lists of requirements, rules, etc. This article provides a detailed procedure to make an unordered list in HTML with square bullets.

How to Make an Unordered List in HTML With Square Bullets?

The unordered list is created with the help of the CSS “<ul>” tag and for the creation of each element inside the unordered list the “<li>” tag is utilized. Furthermore, the CSS properties can also be used for applying different sorts of styling which boosts the overall look and feel of the webpage. Let us walk through a step-by-step procedure for better understanding:

Step 1: Create an Unordered List

To create an unordered list, add the following line of code inside the “<body>” tag. This code is explained below:

<body>

<div style="margin:20px">

<h2> Powered By Linuxhint</h2>

<ul>

<li> Alexander </li>

<li> John </li>

<li> Andrew </li>

<li> Harry </li>

</ul>

</div>

</body>

The description of the code snippet is stated below:

First, create a wrapper “<div>” tag, and utilize the “<ul>” tag inside it. This “<ul>” tag is used for creating the unordered list.
Inside the “<ul>” tag, multiple “<li>” tags are utilized to set list items and assign dummy data.

After the compilation of the above code block, the webpage display like:

The snapshot shows that the unordered list has been created.

Step 2: Create an Unordered List With Square Bullet

The bullet points of the unordered list can be changed according to the requirements of the design. To change the default styling of the bullet shape, the “type” attribute of the “<ul>” tag is utilized. The possible values for the “type” attributes are circle, square, disk, and None.

For setting the “square” bullets, visit the below code block:

<body>

<div>

<h2> Powered By Linuxhint</h2>

<ul type="square">

<li> Alexander </li>

<li> John </li>

<li> Andrew </li>

<li> Harry </li>

</ul>

</div>

</body>

The explanation of the above code snippet:

First, the unordered list is created as demonstrated in the above step.
Next, set the value of “square” to the “type” attribute of the “<ul>” tag. This changes the style of the bullet point to a “square” shape for all containing list items.

After the compilation of the above line of codes, the webpage appears like this:

The above snapshot of the webpage depicts that the unordered list has been created with square bullets.

Conclusion

To make an unordered list in HTML with square bullets, the “type” attribute of the “<ul>” tag can be utilized. For setting the square bullet, provide the value of “square” to the “type” attribute. It enhances the website design and grabs the user’s attention. This article has demonstrated the procedure to make an unordered list in HTML with square bullets.

How to Make an Unordered List in HTML With Square Bullets?