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 disc bullets in HTML?
An unordered list in HTML displays items without numerical ordering, using bullet points instead. The <ul> element creates the list container, while <li> elements define individual list items. By default, unordered lists use disc bullets, but you can customize the bullet style using CSS.
Syntax
Following is the syntax to create an unordered list with disc bullets in HTML −
<ul style="list-style-type: disc"> <li>Item in list</li> <li>Item in list</li> <li>Item in list</li> </ul>
Since disc is the default bullet style for unordered lists, you can also create disc bullets without specifying the style −
<ul> <li>Item in list</li> <li>Item in list</li> </ul>
Types of Unordered List Bullets
HTML supports four different bullet styles for unordered lists −
disc − Creates filled circular bullets (default style).
circle − Creates hollow circular bullets.
square − Creates filled square bullets.
none − Creates a list without any bullet markers.
Basic Unordered List with Disc Bullets
Example − Default Disc Bullets
Following example creates a simple unordered list using default disc bullets −
<!DOCTYPE html>
<html>
<head>
<title>Unordered List with Disc Bullets</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Student Names</h2>
<ul>
<li>Abdul</li>
<li>Jason</li>
<li>Yadav</li>
<li>Saiteja</li>
<li>Akshaj</li>
<li>Tharun</li>
</ul>
</body>
</html>
The output displays a bulleted list with default disc bullets −
Student Names ? Abdul ? Jason ? Yadav ? Saiteja ? Akshaj ? Tharun
Explicitly Setting Disc Bullets
Example − Using CSS list-style-type
You can explicitly specify disc bullets using the CSS list-style-type property −
<!DOCTYPE html>
<html>
<head>
<title>Explicit Disc Bullets</title>
<style>
.disc-list {
list-style-type: disc;
padding-left: 20px;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Programming Languages</h2>
<ul class="disc-list">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>Python</li>
</ul>
</body>
</html>
This produces the same disc bullet style as the default behavior −
Programming Languages ? HTML ? CSS ? JavaScript ? Python
Example − Inline Style for Disc Bullets
You can also use inline CSS to set disc bullets −
<!DOCTYPE html>
<html>
<head>
<title>Inline Disc Style</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Web Technologies</h2>
<ul style="list-style-type: disc; color: #2c5aa0;">
<li>Frontend Development</li>
<li>Backend Development</li>
<li>Database Management</li>
<li>Version Control</li>
</ul>
</body>
</html>
The list items appear in blue color with disc bullets −
Web Technologies ? Frontend Development (blue text) ? Backend Development (blue text) ? Database Management (blue text) ? Version Control (blue text)
Nested Unordered Lists with Disc Bullets
Example
Following example demonstrates nested unordered lists, where each level uses disc bullets −
<!DOCTYPE html>
<html>
<head>
<title>Nested Lists with Disc Bullets</title>
<style>
ul { list-style-type: disc; }
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Course Structure</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>
The nested structure shows disc bullets at all levels −
Course Structure ? Frontend Development ? HTML ? CSS ? JavaScript ? Backend Development ? Node.js ? Python ? PHP
Browser Compatibility
The <ul> element and list-style-type: disc property are supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer. The disc bullet style is the default behavior across all browsers, ensuring consistent appearance.
Conclusion
Unordered lists with disc bullets are created using the <ul> element with <li> items. Since disc is the default bullet style, you can simply use <ul><li>Item</li></ul> or explicitly set list-style-type: disc for the same result. This creates clean, readable bulleted lists perfect for presenting non-sequential information.
5K+ Views
