HTML <ul> Tag

The <ul> tag in HTML defines an unordered list. An unordered list is a collection of items where the order does not matter, and by default, these items are displayed with bullet points. It's a fundamental element for structuring content on web pages, especially when presenting items that are not sequential or numbered.

Syntax

<ul type="circle|disc|square">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Attributes

Example

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

This basic example will render a list with default disc bullets.

More Examples

Using list-style-type CSS Property

While the type attribute is deprecated, you can control the bullet style using CSS:

<ul style="list-style-type: circle;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<ul style="list-style-type: square;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

This will display the same list with circle and square bullets respectively. This is the modern approach as it separates structure from style.

Nested Unordered Lists

You can create nested lists to represent hierarchical information:

<ul>
  <li>Beverages
    <ul>
      <li>Hot
        <ul>
          <li>Coffee</li>
          <li>Tea</li>
        </ul>
      </li>
      <li>Cold
        <ul>
          <li>Juice</li>
          <li>Milk</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Fruits
      <ul>
          <li>Apple</li>
          <li>Banana</li>
      </ul>
  </li>
</ul>

This will display a list with nested sub-lists. It is common to use this when creating navigation menus or complex outlines.

Removing Bullets with CSS

If you want a list without bullets, you can achieve that using CSS:

<ul style="list-style-type: none;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

This will render a list with no bullets.

Real-world Example: Navigation Menu

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/services">Services</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

With CSS, you could style this to look like a standard navigation bar.

Browser Support

The <ul> tag is supported by all major browsers.

Notes and Tips

• Use <ul> for lists where the order of items is not crucial.
• Always use <li> tags as direct children of the <ul> tag to define list items.
• Avoid using deprecated type attribute. Use list-style-type CSS property instead.
• Nesting lists is a great way to represent hierarchical data.
• You can use CSS to style lists extensively, control spacing, bullet types, or even remove bullet points completely and convert them into other navigational elements.
• For ordered lists use the <ol> tag instead.
• Use unordered lists for navigation menus, product listings, feature lists, etc.