Unordered lists are used to group related items where the order doesn't matter. They're displayed with bullet points by default and are one of the most commonly used HTML elements for organizing information.
The UL Element
The <ul> (unordered list) element creates a list of items marked with bullets. Each item in the list is wrapped in an <li> (list item) element.
basic-ul.html
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>This renders as:
- First item
- Second item
- Third item
The LI Element
The <li> (list item) element represents an item in a list. It can only be used inside <ul>, <ol>, or <menu> elements.
li-example.html
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Oranges</li>
<li>Grapes</li>
</ul>Practical Examples
Shopping List
shopping-list.html
<h2>Shopping List</h2>
<ul>
<li>Milk</li>
<li>Bread</li>
<li>Eggs</li>
<li>Butter</li>
<li>Cheese</li>
</ul>Feature List
features.html
<section>
<h2>Product Features</h2>
<ul>
<li>Fast performance</li>
<li>Easy to use interface</li>
<li>24/7 customer support</li>
<li>Free updates</li>
<li>Secure data encryption</li>
</ul>
</section>Navigation Menu
navigation.html
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/services">Services</a></li>
<li><a href="/portfolio">Portfolio</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>Skills List
skills.html
<section>
<h3>My Skills</h3>
<ul>
<li>HTML & CSS</li>
<li>JavaScript</li>
<li>React</li>
<li>Node.js</li>
<li>Python</li>
</ul>
</section>List Items with Multiple Elements
List items can contain any HTML content, not just plain text:
Lists with Links
list-links.html
<ul>
<li><a href="page1.html">Introduction</a></li>
<li><a href="page2.html">Getting Started</a></li>
<li><a href="page3.html">Advanced Topics</a></li>
</ul>Lists with Emphasis
list-emphasis.html
<ul>
<li><strong>Important:</strong> Read the documentation</li>
<li><em>Optional:</em> Join our newsletter</li>
<li><strong>Required:</strong> Complete the survey</li>
</ul>Lists with Multiple Paragraphs
list-paragraphs.html
<ul>
<li>
<h3>Step 1: Planning</h3>
<p>Define your goals and create a detailed project plan.</p>
</li>
<li>
<h3>Step 2: Design</h3>
<p>Create wireframes and mockups for your website.</p>
</li>
<li>
<h3>Step 3: Development</h3>
<p>Build your website using HTML, CSS, and JavaScript.</p>
</li>
</ul>Lists with Images
list-images.html
<ul>
<li>
<img src="icon1.png" alt="Feature 1 icon" width="32" height="32">
Fast Loading Speed
</li>
<li>
<img src="icon2.png" alt="Feature 2 icon" width="32" height="32">
Mobile Responsive
</li>
<li>
<img src="icon3.png" alt="Feature 3 icon" width="32" height="32">
SEO Optimized
</li>
</ul>Styling Unordered Lists
While this tutorial focuses on HTML, here are some common CSS styles for unordered lists:
list-styles.css
/* Remove default bullets */
ul {
list-style-type: none;
}
/* Different bullet styles */
ul.disc { list-style-type: disc; } /* Default */
ul.circle { list-style-type: circle; } /* Hollow circles */
ul.square { list-style-type: square; } /* Squares */
/* Remove bullets and padding */
ul.plain {
list-style: none;
padding: 0;
margin: 0;
}
/* Custom bullet with emoji or icon */
ul.custom li::before {
content: "✓ ";
color: green;
}
/* Horizontal list */
ul.horizontal {
display: flex;
gap: 1rem;
list-style: none;
padding: 0;
}
ul.horizontal li {
display: inline-block;
}When to Use Unordered Lists
✅ Use unordered lists for:
- Shopping lists
- Feature lists
- Navigation menus
- Items where order doesn't matter
- Collection of related items
- Bullet point summaries
- Lists of links
❌ Don't use unordered lists for:
- Sequential steps (use ordered lists instead)
- Rankings or prioritized items (use ordered lists)
- Data that should be in a table
- Layout purposes only (use CSS for layout)
Accessibility Considerations
♿ Accessibility Best Practices:
- Screen readers announce lists and the number of items
- Use semantic HTML (ul/li) instead of styled divs
- Keep list items concise and clear
- Ensure links in lists are descriptive
- Don't use
list-style: noneunless you provide alternative visual indicators - Test navigation with keyboard only
Common Design Patterns
Icon List
icon-list.html
<ul class="feature-list">
<li>
<span class="icon">🚀</span>
<strong>Fast Performance</strong>
<p>Lightning-fast load times for better user experience</p>
</li>
<li>
<span class="icon">🔒</span>
<strong>Secure</strong>
<p>Bank-level security to protect your data</p>
</li>
<li>
<span class="icon">📱</span>
<strong>Mobile Ready</strong>
<p>Responsive design that works on all devices</p>
</li>
</ul>Social Media Links
social-links.html
<footer>
<h3>Follow Us</h3>
<ul class="social-links">
<li><a href="https://twitter.com/username">Twitter</a></li>
<li><a href="https://facebook.com/username">Facebook</a></li>
<li><a href="https://instagram.com/username">Instagram</a></li>
<li><a href="https://linkedin.com/in/username">LinkedIn</a></li>
</ul>
</footer>Checklist
checklist.html
<h3>Launch Checklist</h3>
<ul class="checklist">
<li>Test all links</li>
<li>Optimize images</li>
<li>Check mobile responsiveness</li>
<li>Validate HTML</li>
<li>Test in multiple browsers</li>
<li>Set up analytics</li>
<li>Create sitemap</li>
</ul>Best Practices
✅ Do:
- Use ul for items where order doesn't matter
- Always wrap list items in li elements
- Keep list items concise and scannable
- Use semantic HTML structure
- Group related items together
- Consider accessibility when removing default styles
❌ Don't:
- Put content directly in ul (must be in li)
- Use lists just for indentation (use CSS)
- Create excessively long lists without grouping
- Forget closing li tags
- Use divs instead of proper list markup
Common Mistakes
❌ Wrong:
MARKUP
<!-- Don't put content directly in ul -->
<ul>
This is wrong
<li>Item 1</li>
</ul>
<!-- Don't use divs for lists -->
<div class="list">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
</div>
<!-- Don't forget closing tags -->
<ul>
<li>Item 1
<li>Item 2
</ul>✅ Correct:
MARKUP
<!-- All content in li elements -->
<ul>
<li>This is correct</li>
<li>Item 1</li>
</ul>
<!-- Use semantic HTML -->
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<!-- Always close tags properly -->
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>Browser Default Styling
Browsers apply default styling to unordered lists:
- Disc bullet points (filled circles)
- Left padding (usually around 40px)
- Margin above and below the list
- Nested lists use different bullet styles
You can override these defaults with CSS, but be mindful of accessibility when removing visual indicators.
Key Takeaways
<ul>creates an unordered (bullet point) list<li>represents each list item- Use unordered lists when order doesn't matter
- List items can contain any HTML content
- All content inside ul must be wrapped in li elements
- Screen readers announce lists for better accessibility
- Default styling includes disc bullets and left padding
- Commonly used for navigation, features, and collections
What's Next?
Now that you understand unordered lists, you're ready to learn about ordered lists. In the next lesson, we'll explore the ol element for creating numbered lists where sequence matters.