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;" > w3wiki </ 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: