An HTML Unordered List, often called a bulleted list, is a fundamental feature in HTML that allows you to categorize similar items without indicating a specific order. These lists are commonly seen on web pages for showcasing menus, sets of features, grouped information, and more.
What Is an Unordered List in HTML?
In HTML, an unordered list is created using the <ul> element. Each individual item in the list is wrapped in an <li> (list item) element. By default, web browsers render unordered lists with bullet points.
Syntax
<ul>
<li> Item 1 </li>
<li> Item 2 </li>
</ul>
Output:
• Item 1
• Item 2
This format is straightforward and efficient for displaying non-linear information.
List Marker Styles Using CSS
HTML displays lists with bullets by default, and we have the option to customize the bullet style using the list-style-type property in CSS. Here are some common values you can select from:
| list-style-type Value | Description |
|---|---|
disc |
Default. Solid round bullets. |
| circle | Hollow circle bullets. |
| square | Solid square bullets. |
none |
Removes all list markers. |
1. Disc (Default)
Example
<ul style="list-style-type: disc;">
<li> Coffee </li>
<li> Tea </li>
<li> Milk </li>
</ul>
Output:
• Coffee
• Tea
• Milk
2. Circle
Example
<ul style="list-style-type: circle;">
<li> HTML </li>
<li> CSS </li>
<li> JavaScript </li>
</ul>
Output:
◦ HTML
◦ CSS
◦ JavaScript
3. Square
Example
<ul style="list-style-type: square;">
<li> HTML </li>
<li> CSS </li>
<li> React </li>
</ul>
Output:
■ HTML
■ CSS
■ React
4. None
Example
<ul style="list-style-type: none;">
<li> HTML </li>
<li> CSS </li>
<li> JavaScript </li>
</ul>
Output:
(no bullets)
HTML
CSS
JavaScript
Note: The HTML5 version does not support the type attribute in <ul>. Instead, use list-style-type in CSS.
Nested Unordered Lists
Nested HTML unordered lists allow for the inclusion of lists inside list items, enabling the presentation of data in a hierarchical manner.
Example
<ul>
<li> Programming Languages
<ul>
<li> HTML </li>
<li> CSS </li>
</ul>
</li>
<li> Tools </li>
</ul>
Output:
• Programming Languages
o HTML
o CSS
• Tools
Lists can be nested to any depth required, but it is important to prioritize readability at all times.
Horizontal Unordered Lists (Menus)
CSS enables unordered lists to be styled to display horizontally, a format often used for navigation menus.
Example
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
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>
Output:
//Horizontal nav menu with hover effect.
Using Unordered Lists for Navigation
Another common usage of unordered lists is for website navigation purposes. These lists are not required to follow a specific sequence, making them semantically meaningful and user-friendly for accessibility.
Simple Inline Navigation Example
Example
<ul style="list-style-type: none; padding: 0;">
<li style="display: inline; margin-right: 20px;"> <a href="#home"> Home </a> </li>
<li style="display: inline; margin-right: 20px;"> <a href="#services"> Services </a> </li>
<li style="display: inline; margin-right: 20px;"> <a href="#contact"> Contact </a> </li>
</ul>
Output:
//Horizontal text-based menu.
Accessibility and Semantics
Unordered lists serve a dual purpose by not only organizing items visually but also providing semantic significance for screen readers and other assistive technologies. This functionality allows individuals relying on these tools to understand the connection between the grouped list items.
Tips for Accessible Lists:
- Use <ul> for items that do not need an ordering, and turn to <ol> when that order is crucial.
- Make certain that every <li> contains meaningful content.
- Where there are links, make the anchor text descriptive.
- Do not make lists too deep; they may confuse screen readers.
Styling Tips and Tricks
In addition to altering the bullet styles, enhancements can be implemented on the layout and appearance of unordered lists by utilizing various CSS methods on them:
Custom Bullets with Images :
Example
ul {
list-style: none;
}
ul li::before {
content: url('bullet-icon.png');
margin-right: 10px;
}
Creating adaptable menus: To design menus that adjust to different screen sizes, you can utilize flexbox or grid in combination with media queries and percentage-based widths.
Spacing and Padding: Modify the padding-left property for <ul> and adjust the margin property for <li> to achieve neat and organized spacing.
Pad the <ul> and <li> whatever you want to tidy up, and set margin on li and padding-left on <ul>.
Best Practices for Using Unordered Lists
These modifications allow us to incorporate unordered lists seamlessly into modern web design while upholding semantic integrity. Unordered lists are particularly well-suited for various purposes such as navigation menus, feature lists, or organizing grouped information. In place of outdated HTML attributes like "type," CSS's list-style-type property offers versatile options for defining bullet styles, including circles, squares, or even opting to remove them altogether to achieve more polished and minimalist designs.
Utilizing nested unordered lists can simplify the organization of complex or hierarchical unordered lists. However, it is generally advisable to refrain from nesting unordered lists in order to maintain a clear structure and enhance comprehension.
Adhering to the accessibility guideline requires that each item in a list with a hyperlink uses meaningful anchor text. When designing horizontal lists such as navigation menus, it is essential to make them adaptable for mobile devices by implementing CSS media queries. By doing so, consistency in user interaction is maintained regardless of the screen size or device being used.
Browser Compatibility
| Element | Chrome | IE | Firefox | Opera | Safari |
|---|---|---|---|---|---|
<ul> |
Yes | Yes | Yes | Yes | Yes |
Conclusion
HTML unordered lists (<ul>) are quite useful when the presentation of items is required in some sort of a list, yet without any order. Anything is enclosed in a <li> tag and formatted with the list-style-type property. <ul> This is your tag of choice if you are using a list of bullet points or constructing Dropdowns, or designing Navigation bars . Adopt the nesting and CSS styling convention to create structurally, accessible and aesthetically pleasing content.