Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
An unordered list is used when the order of items doesn't matter. Each item is displayed with a bullet point. Use the <ul> element to create an unordered list, and wrap each item in <li>.
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>The most basic unordered list uses the <ul> tag and displays items with bullet points.
Basic unordered list with bullet points
<h3>Shopping List</h3>
<ul>
<li>Milk</li>
<li>Bread</li>
<li>Cheese</li>
<li>Eggs</li>
<li>Butter</li>
</ul>Loading preview...
You can change the bullet style using the list-style-type CSS property on the <ul> element.
Solid circle (●) - Default
Hollow circle (○)
Square (■)
No bullet (custom styling)
See different bullet styles in action
<div class="list-styles">
<div class="style-group">
<h4>Disc (default) ●</h4>
<ul style="list-style-type: disc;">
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>
</div>
<div class="style-group">
<h4>Circle ○</h4>
<ul style="list-style-type: circle;">
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>
</div>
<div class="style-group">
<h4>Square ■</h4>
<ul style="list-style-type: square;">
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>
</div>
<div class="style-group">
<h4>None (no bullet)</h4>
<ul style="list-style-type: none;">
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>
</div>
</div>Loading preview...
You can create custom bullets using CSS ::before pseudo-elements to add emojis, icons, or custom symbols.
ul {
list-style: none;
padding-left: 0;
}
li::before {
content: "🚀 ";
margin-right: 0.5rem;
}Emoji, color-coded, and checkmark bullets
<div class="custom-bullets">
<div class="bullet-group">
<h4>Emoji Bullets</h4>
<ul class="emoji-bullets">
<li>Frontend Development</li>
<li>Backend Development</li>
<li>Database Design</li>
</ul>
</div>
<div class="bullet-group">
<h4>Color Coded</h4>
<ul class="color-bullets">
<li class="primary">Primary feature</li>
<li class="secondary">Secondary feature</li>
<li class="tertiary">Tertiary feature</li>
</ul>
</div>
<div class="bullet-group">
<h4>Checkmark Style</h4>
<ul class="checkmark-bullets">
<li>Feature one</li>
<li>Feature two</li>
<li>Feature three</li>
</ul>
</div>
</div>Loading preview...
You can nest lists inside list items to create sub-lists. This is useful for organizing information into categories.
<ul>
<li>Category
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</li>
<li>Another category</li>
</ul>Multi-level categorized list
<h3>Web Development Skills</h3>
<ul>
<li>Frontend
<ul>
<li>HTML & CSS</li>
<li>JavaScript</li>
<li>React/Vue</li>
</ul>
</li>
<li>Backend
<ul>
<li>Node.js</li>
<li>Databases</li>
<li>APIs</li>
</ul>
</li>
<li>Tools & Practices
<ul>
<li>Version Control</li>
<li>Testing</li>
<li>Deployment</li>
</ul>
</li>
</ul>Loading preview...
Grocery and todo lists
Product capabilities
Menu items and links
Advantages and highlights
Categories and labels
Articles and resources