HTML Tags
HTML <ul> Tags
The
<ul>tag in HTML defines an unordered (bulleted) list, while the<li>tag defines individual list items within that list.
Unordered lists are commonly used for displaying groups of items where the order doesn’t matter, such as menus, features, or simple lists.
Syntax
html
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>Attributes
| Tag | Attribute | Description |
|---|---|---|
<ul> | type | Specifies the bullet style. Values: disc (default), circle, square. (Deprecated in HTML5; use CSS instead) |
<li> | value | Specifies the number of a list item (only for ordered lists but valid in mixed cases). |
<li> | type | Defines list item marker style. Values: disc, circle, square. (Deprecated) |
Example
html
<!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-type: square;
padding: 10px;
width: 250px;
}
li {
margin: 5px 0;
color: #333;
font-size: 16px;
}
</style>
</head>
<body>
<h2>Favorite Fruits</h2>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
<li>Mango</li>
</ul>
</body>
</html>Browser Support
Chrome | Edge | Firefox | Safari | Opera | IE9+ |
|---|---|---|---|---|---|
| Yes | Yes | Yes | Yes | Yes | Yes |
The <ul> and <li> tags have full browser support across all modern browsers.
Use our Try It Editor to see how list markers appear differently based on CSS styling.
Notes
- The
<ul>tag creates unordered (bulleted) lists, while<li>defines each list item. - The bullet style can be changed using CSS:
list-style-type. - Lists can be nested by placing one
<ul>inside another<li>. - Avoid excessive nesting for readability and accessibility.
Conclusion
The <ul> and <li> tags are essential for structuring unordered lists.
They improve readability, accessibility, and the visual organization of grouped items.
For consistent styling, always control bullet appearance using CSS instead of deprecated HTML attributes.