HTML
HTML Unordered Lists
HTML unordered lists are an essential building block in web development. They allow you to present related information in an easy-to-read, bullet-pointed format without implying any inherent order. From navigation menus to feature lists and product details, unordered lists help improve both the structure and accessibility of your content.
In this tutorial, we’ll walk you through everything you need to know about HTML unordered lists—from the basics of the <ul> and <li> tags to advanced styling techniques with CSS. Whether you’re a beginner or an experienced developer looking to refine your skills, this comprehensive article has you covered.
Learning Outcomes
By the end of this tutorial, you will know:
- The basic syntax of HTML unordered lists using
<ul>and<li>tags. - How to customize list markers with CSS using the
list-style-typeproperty. - Advanced topics including nested and horizontal unordered lists.
- Practical use cases, best practices, and FAQs to ensure your unordered lists are both effective and accessible.
Basic Syntax and Structure
What Is an Unordered List?
An HTML unordered list is defined by the <ul> tag. Each item in the list is wrapped in a <li> (list item) tag. By default, browsers display the list items with bullet points (typically a filled circle, or disc).
📌 Simple Unordered List Example
Below is a simple example of an unordered list:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Output:
- Coffee
- Tea
- Milk
This basic structure forms the foundation for all unordered lists.
Customizing List Markers with CSS & Styles
The appearance of bullet points can be customized using the CSS list-style-type property. You can change the default bullet style to suit your design needs.
Marker Styles
disc;The default filled circle.circle;A hollow circle.square;A square marker.none;No marker is displayed.
📌 Default Disc Marker Code Example
<ul style="list-style-type: disc;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Output:
- Coffee
- Tea
- Milk
📌 Circle Marker Code Example
<ul style="list-style-type: circle;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Output:
- Coffee
- Tea
- Milk
📌 Square Marker Code Example
<ul style="list-style-type: square;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Output:
- Coffee
- Tea
- Milk
📌 No Marker (None) Code Example
<ul style="list-style-type: none;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Output:
- Coffee
- Tea
- Milk
Using these properties, you can easily align the look and feel of your lists with the overall design of your website.
Advanced HTML Unordered Lists
Nested Unordered Lists
Nested lists are useful for creating sub-categories or providing additional details within a primary list item. You nest one <ul> inside an <li> to achieve this.
📌 Nested List Code Example
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black Tea</li>
<li>Green Tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
Output:
- Coffee
- Tea
- Black Tea
- Green Tea
- Milk
This example demonstrates how to nest a secondary list within a primary list item.
Horizontal Unordered Lists
Horizontal unordered lists are commonly used for navigation menus. With a few CSS tweaks, you can align list items horizontally instead of vertically.
📌 Horizontal List Example
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none; /* Remove default bullets */
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left; /* Align items horizontally */
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
This code creates a simple horizontal navigation menu with clear hover effects.
Use Cases of Unordered Lists
Unordered lists are incredibly versatile and are used in many scenarios, including:
- Navigation Menus: Organize links for website navigation.
- Product Features: Highlight key features or benefits in bullet points.
- Content Breakdown: Present summaries or lists of items in a clear, digestible format.
- Service Listings: Describe services or options without implying a specific order.
Best Practices
To ensure your HTML unordered lists are both functional and accessible, keep these best practices in mind:
- Semantic HTML - Always use
<ul>for unordered data. This practice aids screen readers and improves overall accessibility. - Clean Markup - Avoid unnecessary nesting or extra markup that may clutter your HTML.
- Consistent Styling - Use external or internal CSS to maintain consistent styling across your site.
- Accessibility - Structure lists so that they are easily navigable by assistive technologies.
Frequently Asked Questions on Unordered Lists (FAQs)
What Is an HTML Unordered List?
An HTML unordered list is a collection of items displayed with bullet points. It is defined using the <ul> tag, with each item wrapped in an <li> tag.
How Do I Change the Bullet Style of an Unordered List?
You can change the bullet style by using the CSS list-style-type property. For example:
ul {
list-style-type: square;
}
How Do I Nest Unordered Lists?
Place a <ul> inside an <li> tag to create a nested list:
<li>Parent Item
<ul>
<li>Child Item</li>
</ul>
</li>
Can Unordered Lists Be Used for Navigation Menus?
Yes, with proper CSS styling, unordered lists can be transformed into both horizontal and vertical navigation menus.
How Do I Remove Bullets from an Unordered List?
Set the list-style-type property to none on the <ul>:
<ul style="list-style-type: none;">
<li>Item One</li>
<li>Item Two</li>
</ul>