How to create an unordered list with square bullets in HTML ?
Last Updated :
05 Jan, 2024
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 >
|
Output:
Share your thoughts in the comments
Please Login to comment...