XQA
Back to Web Development
2026-01-135 min read

Unordered Lists (Web Development)

Learn Unordered Lists (Web Development) step by step with clear examples and exercises.

Why This Matters

Unordered lists are an essential component of web development, offering a straightforward method for organizing and presenting content in an easily comprehensible format. They play a crucial role in creating navigation menus, bullet points, and other list-based structures on websites, making them indispensable for anyone aiming to construct professional and user-friendly sites.

Prerequisites

To fully grasp unordered lists, it's essential that you have a foundational understanding of HTML and CSS. Here are some prerequisites you should be well-versed in:

  1. Basic HTML syntax, including elements like `, , , and common inline elements such as and `.
  2. Understanding of CSS properties, including display, list-style-type, margin, and padding.
  3. Familiarity with HTML selectors, such as the element selector (e.g., div {}) and class selector (e.g., .myClass {}).
  4. Knowledge of how to structure HTML documents using semantic tags (e.g., `, , , `).
  5. Comfort with CSS Flexbox for layout purposes.

Core Concept

An unordered list in HTML is created using the ` tag, and each individual item within the list is represented by the ` tag. Here's an example of a simple unordered list:

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

By default, each `` element will be displayed with a bullet point (or disc) before it. However, you can customize the appearance of your unordered list using CSS. For example:

ul {
padding-left: 20px;
}

li::before {
content: '*';
color: red;
}

In this example, we've added a padding to the `` element and changed the color of the bullet points to red.

Styling Unordered Lists with CSS

You can style an unordered list by targeting the ` and ` elements using CSS selectors. Here are some common properties you might use:

  • list-style-type: Allows you to change the type of bullet point used (e.g., circles, squares, etc.).
  • padding: Adds space around the content within each list item.
  • margin: Adjusts the spacing between list items.
  • display: Changes the layout and positioning of the list items.
  • color: Sets the color of the bullet points or text within each list item.

Worked Example

Let's create an unordered list that displays a menu for a website. We'll use CSS to style the list and make it more visually appealing.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Unordered List Example</title>
<style>
ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
justify-content: space-around;
}

li {
padding: 10px;
background-color: #f2f2f2;
border: 1px solid #ccc;
text-decoration: none;
color: #333;
}

li:hover {
background-color: #ddd;
}

/* Customize the active item */
li.active {
background-color: #999;
}
</style>
</head>
<body>
<ul id="myMenu">
<li><a href="#" class="active">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</body>
</html>

In this example, we've removed the default bullet points using list-style: none, set the list to display as a horizontal flex container, and styled each individual item with some basic padding, borders, and colors. We've also added hover effects to make the items more interactive and an active class for the currently selected menu item.

Common Mistakes

  1. **Forgetting to close the ` tag**: Remember to always close your unordered list tags with a closing `

.

  1. Not setting list-style: none: If you want to remove bullet points from your list, make sure to set list-style: none in your CSS.
  2. Using the wrong tag for ordered lists: Be careful not to use the ` tag when you actually need an ordered list (created with the ` tag).
  3. Not styling the list properly: Don't forget to add some basic CSS to make your unordered lists look nice and professional.
  4. **Incorrectly nesting ` elements**: Each should be a direct child of the parent . Nesting elements within other ` elements is not valid HTML.
  5. Ignoring accessibility considerations: Make sure to provide meaningful text for each list item, as screen readers rely on this information to help visually impaired users navigate your site.
  6. Not optimizing for mobile devices: Ensure that your unordered lists are responsive and adapt to different screen sizes.

Practice Questions

  1. Create an unordered list that displays a set of popular programming languages with their corresponding logos as images. Use CSS to style the list and make it visually appealing.
  2. Style an unordered list to mimic the look and feel of a popular social media platform's navigation menu, including hover effects and active states.
  3. Create an interactive unordered list that changes color when the user hovers over each item and reverts back to its original color after the mouse leaves the item.
  4. Given the following HTML structure, add CSS to style the unordered list as a horizontal menu with equal spacing between items and make it responsive:
<ul id="myMenu">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>

FAQ

  1. Why should I use unordered lists? Unordered lists are a simple and effective way to organize content on a webpage, making it easier for users to navigate and understand the structure of your site. They also provide a flexible foundation for creating various types of list-based structures, such as navigation menus or bullet points.
  2. Can I customize the appearance of my unordered list? Yes! You can use CSS to change the style of your unordered list, including removing bullet points, changing colors, adding padding, and more.
  3. What's the difference between an ordered list and an unordered list? An ordered list is created using the ` tag, and it displays items in a numbered or ordered format. An unordered list, on the other hand, is created using the ` tag and displays items without numbers or bullet points by default.
  4. Can I nest unordered lists within other unordered lists? Yes! You can create multi-level unordered lists by nesting ` tags within each other. However, it's important to ensure that each is a direct child of the parent `.
  5. How do I remove bullet points from my unordered list? To remove bullet points from your unordered list, set the list-style: none; property in your CSS.
  6. What are some best practices for styling unordered lists? Some best practices include using semantic HTML, making the list responsive, providing meaningful text for each list item, and ensuring proper accessibility considerations are met (e.g., screen reader compatibility). Additionally, it's a good idea to use CSS Flexbox or Grid for layout purposes and to optimize your unordered lists for various screen sizes and devices.
Unordered Lists (Web Development) | Web Development | XQA Learn