HTML ul Tag

HTML <ul> Tag: Creating Unordered Lists

The <ul> (unordered list) tag in HTML is used to create a bulleted list. Each item inside the list is wrapped in an <li> (list item) tag.

1. Basic Syntax

<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Cherry</li>
</ul>

✅ Displays:

• Apple

• Banana

• Cherry

2. Changing Bullet Styles with type Attribute (Deprecated)

The type attribute was used in older HTML versions but is now replaced with CSS.

<ul type="circle">
  <li>Circle Bullet</li>
</ul>

<ul type="square">
  <li>Square Bullet</li>
</ul>

✅ The modern approach uses CSS (list-style-type).

3. Customizing List Styles with CSS

You can change the bullet style using list-style-type:

<style>
  ul {
    list-style-type: square; /* Options: disc (default), circle, square, none */
  }
</style>

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

✅ Common list-style-type values:

• disc (●) - Default

• circle (○)

• square (■)

• none (removes bullets)

4. Nested Lists (Lists Inside Lists)

You can create sublists by nesting <ul> inside <li>:

<ul>
  <li>Fruits
    <ul>
      <li>Apple</li>
      <li>Banana</li>
    </ul>
  </li>
  <li>Vegetables</li>
</ul>

✅ Displays:

• Fruits

  • Apple

  • Banana

• Vegetables

5. Horizontal List (Inline List)

You can make the list items appear in a row using CSS:

<style>
  ul {
    list-style: none;
    padding: 0;
  }

  li {
    display: inline;
    margin-right: 10px;
  }
</style>

<ul>
  <li>Home</li>
  <li>About</li>
  <li>Contact</li>
</ul>

✅ Displays as:
Home | About | Contact

6. Custom Bullets Using Images

You can replace default bullets with an image:

<style>
  ul {
    list-style: none;
  }

  li {
    background: url('bullet.png') no-repeat left center;
    padding-left: 20px;
  }
</style>

<ul>
  <li>Custom Bullet 1</li>
  <li>Custom Bullet 2</li>
</ul>

✅ Each item uses bullet.png instead of the default circle.

7. Conclusion

• The <ul> tag creates unordered (bulleted) lists.

• <li> defines each list item.

• CSS can be used to customize bullet styles, alignment, and layout.