Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to create an unordered list with square bullets in HTML?
An unordered list in HTML displays items without numbering, using bullet markers instead. By default, unordered lists use circular bullets, but you can customize the bullet style using the list-style-type CSS property to create square bullets, circles, or remove bullets entirely.
HTML provides four main bullet types for unordered lists −
disc − Creates circular bullets (default style)
circle − Creates hollow circular bullets
square − Creates solid square bullets
none − Removes all bullet markers
Syntax
Following is the syntax to create an unordered list with square bullets in HTML −
<ul style="list-style-type: square"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>
The list-style-type: square CSS property applied to the <ul> element changes the default circular bullets to solid square markers.
Using Inline CSS for Square Bullets
Example
Following example demonstrates creating an unordered list with square bullets using inline CSS −
<!DOCTYPE html>
<html>
<head>
<title>Square Bullet List</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Programming Languages</h2>
<ul style="list-style-type: square">
<li>JavaScript</li>
<li>Python</li>
<li>Java</li>
<li>C++</li>
<li>Ruby</li>
</ul>
</body>
</html>
The output displays a list with square bullets −
Programming Languages ? JavaScript ? Python ? Java ? C++ ? Ruby
Using Internal CSS for Square Bullets
Example
Following example shows how to create square bullet lists using internal CSS styling −
<!DOCTYPE html>
<html>
<head>
<title>Square Bullets with CSS</title>
<style>
.square-list {
list-style-type: square;
color: #2c3e50;
}
h2 {
color: #34495e;
border-bottom: 2px solid #3498db;
padding-bottom: 5px;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Web Development Technologies</h2>
<ul class="square-list">
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
<li>React.js</li>
<li>Node.js</li>
</ul>
</body>
</html>
This example uses a CSS class to apply square bullets and additional styling to the list −
Web Development Technologies (with blue underline) ? HTML5 ? CSS3 ? JavaScript ? React.js ? Node.js
Nested Lists with Square Bullets
Example
Following example demonstrates creating nested unordered lists with square bullets −
<!DOCTYPE html>
<html>
<head>
<title>Nested Square Lists</title>
<style>
ul { list-style-type: square; }
ul ul { list-style-type: circle; }
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Learning Path</h2>
<ul>
<li>Frontend Development
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li>Backend Development
<ul>
<li>Node.js</li>
<li>Python</li>
<li>PHP</li>
</ul>
</li>
</ul>
</body>
</html>
This creates a nested structure where main items use square bullets and sub-items use circular bullets −
Learning Path ? Frontend Development ? HTML ? CSS ? JavaScript ? Backend Development ? Node.js ? Python ? PHP
Comparison of List Bullet Types
| Bullet Type | CSS Value | Appearance | Use Case |
|---|---|---|---|
| Disc | list-style-type: disc |
Filled circle (?) | Default style, general purpose lists |
| Circle | list-style-type: circle |
Hollow circle (?) | Sub-lists, secondary information |
| Square | list-style-type: square |
Filled square (?) | Technical documentation, structured lists |
| None | list-style-type: none |
No bullet | Navigation menus, custom styled lists |
Conclusion
Creating unordered lists with square bullets in HTML is accomplished using the list-style-type: square CSS property. This can be applied through inline styles, internal CSS, or external stylesheets. Square bullets provide a modern, structured appearance suitable for technical documentation and formal content presentation.
10K+ Views
