HTML <ul> Tag

The <ul> tag in HTML is used to create an unordered list, which is a collection of items displayed in a list format where the order of the items is not important. Each item within the list is typically wrapped in an <li> (list item) tag. The <ul> element is often used to present a group of related items, such as navigation menus, feature lists, or collections of points, where the sequence does not convey any specific priority or hierarchy.

Visually, browsers usually render unordered lists with bullet points before each item, although the appearance can be customized using CSS to change the bullet style, indentation, or even replace bullets with images. The structure of a <ul> is hierarchical, meaning it can contain nested <ul> elements inside <li> elements to create sublists, enabling multi-level lists for more complex data representation.

The <ul> element improves semantic HTML by indicating that the enclosed items are part of a group without implying any sequential relationship, which is helpful for accessibility tools such as screen readers. Proper use of <ul> ensures that lists are readable, organized, and easily stylable, making it a fundamental component for structured content on web pages.

Example structure:

<ul>
  <li>Apples</li>
  <li>Oranges</li>
  <li>Bananas</li>
</ul>

This would render as a simple bulleted list of fruits. Nesting another <ul> inside a <li> allows for subcategories:

<ul>
  <li>Fruits
    <ul>
      <li>Apples</li>
      <li>Oranges</li>
    </ul>
  </li>
  <li>Vegetables
    <ul>
      <li>Carrots</li>
      <li>Broccoli</li>
    </ul>
  </li>
</ul>