HTML <ul> Tag

What You’ll Learn

The <ul> tag structures unordered lists on webpages. This guide covers syntax, bullet styling, nested lists, common use cases, and how ul differs from ol.

What Is the <ul> Tag?

The <ul> tag is an HTML element used to create unordered lists, where the order of items does not matter. Browsers typically display each list item with a bullet point marker.

📝 Syntax

Wrap each list item in <li> tags inside the opening and closing <ul> tags:

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

Syntax Rules

• ul is the container; only li (and script-supporting elements) should be direct children.
• Nested lists go inside an li, not directly under ul.
• Default bullet style is a filled disc.
• Style markers with CSS list-style-type instead of the obsolete type attribute.

⚖️ <ul> vs <ol>

🎨 CSS Bullet Styling

Use CSS instead of the obsolete type attribute to control bullet appearance:

ul.disc   { list-style-type: disc; }
ul.circle { list-style-type: circle; }
ul.square { list-style-type: square; }
ul.none   { list-style: none; padding-left: 0; }

🧩 Nesting Lists

Nest unordered lists within each other to create a hierarchical structure. Place the nested ul inside a parent li:

<ul>
  <li>Fruits
    <ul>
      <li>Apple</li>
      <li>Orange</li>
    </ul>
  </li>
  <li>Vegetables
    <ul>
      <li>Carrot</li>
      <li>Broccoli</li>
    </ul>
  </li>
</ul>

• Fruits
  • Apple
  • Orange
• Vegetables
  • Carrot
  • Broccoli

Examples Gallery

Real-world unordered lists for features, categories, and grouped content.

<ul type="circle">
  <li>Item A</li>
  <li>Item B</li>
  <li>Item C</li>
</ul>

<ul>
  <li>Apple</li>
  <li>Orange</li>
  <li>Banana</li>
</ul>

<ul>
  <li>Fruits
    <ul>
      <li>Apple</li>
      <li>Orange</li>
      <li>Banana</li>
    </ul>
  </li>
  <li>Vegetables
    <ul>
      <li>Carrot</li>
      <li>Broccoli</li>
      <li>Spinach</li>
    </ul>
  </li>
</ul>

♿ Accessibility

• Semantic lists — Screen readers announce list length and item position automatically.
• Use ul for unordered content — Do not fake bullets with manual characters or br tags.
• Meaningful items — Each li should be a complete, understandable point.
• Nest correctly — Sub-lists inside li preserve logical hierarchy for assistive tech.
• Nav lists — Wrap navigation links in ul with list-style: none for accessible menus.

💡 Best Practices