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 >
|
Output:
Last Updated :
05 Jan, 2024
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...