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

<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

<!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

Use our TryIt Editor to see the output

Browser Support

Chrome
Chrome
Firefox
Firefox
Edge
Edge
Safari
Safari
Opera
Opera
IE
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.

Sign In Form

User your email and password to singn in

Don’t have an account, signup here : 

HTML5 & CSS3

Tools and Tutorials

Want a Website

Want a website for your business ?

Please fill out the details below, so we can reach out to you.

Registration Form

Signup to track your record and much more.

We have sent you an email with a registration link. Please click the link to verify your email address, or enter the 6-digit OTP provided in the email.

Didn't receive the OTP. Regenerate OTP Resend