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:
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:
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.
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.