In this section of our HTML tutorial, we will explore unordered lists, an essential element for structuring and presenting information on web pages. We’ll cover the basic usage of the <ul> (unordered list) and <li> (list item) elements and provide examples for a better understanding.
Unordered Lists (<ul>) Overview
Unordered lists are used to present a list of items where the order doesn’t matter. Each item in an unordered list is typically preceded by a bullet point, though the appearance can vary based on CSS styling. Unordered lists are ideal for scenarios like navigation menus, features lists, or any situation where item sequence isn’t crucial.
Basic Syntax
Here is the basic syntax for creating an unordered list using the <ul> and <li> elements in HTML:
|
1 2 3 4 5 |
<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> |
In this example, we have an unordered list containing three list items. Each list item is represented by an <li> element.
Common List Styling
Unordered lists can be styled using CSS to change the appearance of the bullet points. You can change the type of bullet point or even use custom images as list markers. Here’s an example of custom bullet points using CSS:
|
1 2 3 4 5 |
<ul class="custom-list"> <li>Custom Bullet 1</li> <li>Custom Bullet 2</li> <li>Custom Bullet 3</li> </ul> |
|
1 2 3 4 5 6 7 8 9 10 |
/* CSS Styles */ .custom-list { list-style-type: none; /* Remove default bullet points */ padding-left: 1.5em; /* Add left padding for custom bullets */ } .custom-list li::before { content: "•"; /* Use a custom bullet character */ margin-right: 0.5em; /* Add space between bullet and text */ } |
For more about CSS list styling, you can check the CSS Lists Tutorial.
Nested Lists
Unordered lists can also be nested within one another to create hierarchical structures. For example, you can use a nested list to represent subcategories within a main category.
|
1 2 3 4 5 6 7 8 9 |
<ul> <li>Main Category 1 <ul> <li>Subcategory 1.1</li> <li>Subcategory 1.2</li> </ul> </li> <li>Main Category 2</li> </ul> |
Nested lists can be used for site navigation, outlining content, or any situation where you need to represent a hierarchy.
Code Examples
Here are additional examples of unordered lists to illustrate different use cases:
Simple Unordered List:
|
1 2 3 4 5 |
<ul> <li>Apples</li> <li>Bananas</li> <li>Oranges</li> </ul> |
Custom Bullet Points with CSS:
|
1 2 3 4 5 |
<ul class="custom-list"> <li>Custom Bullet 1</li> <li>Custom Bullet 2</li> <li>Custom Bullet 3</li> </ul> |
Nested Unordered List:
|
1 2 3 4 5 6 7 8 9 |
<ul> <li>Main Category 1 <ul> <li>Subcategory 1.1</li> <li>Subcategory 1.2</li> </ul> </li> <li>Main Category 2</li> </ul> |
Conclusion
Unordered lists created with <ul> and <li> elements are versatile tools for structuring content on web pages. They allow you to present information in a clear and organized manner, and with CSS styling, you can customize the appearance of list markers to suit your design. Whether you’re creating navigation menus, feature lists, or outlining content, understanding how to use unordered lists is a fundamental skill in web development.