HTML5ANDCSS3 logoHTML5ANDCSS3Tools and Tutorials

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

TagAttributeDescription
<ul>typeSpecifies the bullet style. Values: disc (default), circle, square. (Deprecated in HTML5; use CSS instead)
<li>valueSpecifies the number of a list item (only for ordered lists but valid in mixed cases).
<li>typeDefines 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>

Output

Browser Output

html

Use our TryIt Editor to see the output

Browser Support

Chrome
Edge
Firefox
Safari
Opera
IE9+
YesYesYesYesYesYes

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.

PreviousHTML <nav> TagNextHTML <ol> Tag