Previous
Written by: rJTutorial Team | Last Updated:

HTML Unordered List

An HTML unordered list (<ul>) is a semantic element used to group a collection of related items where the specific sequence doesn't change the meaning of the content. Think of a grocery list or a list of features on a product page; it doesn't matter if "Milk" comes before "Bread." By default, browsers display these items with a simple bullet point (a small black dot) to visually separate them.

Best Practice: Use unordered lists for navigation menus. Even though menus often look like horizontal bars, search engines and screen readers understand them better when they are structured as a list of links.

Creating an Unordered List

Building a list requires a parent-child relationship between two different tags. The <ul> tag acts as the container (the parent), while each individual item is wrapped in an <li> (list item) tag (the children).

Common Mistake: Placing text or other tags (like <div> or <p>) directly inside the <ul> tag. Only <li> tags are valid direct children of a <ul>.

Basic Syntax

<ul>
  <li>Item one</li>
  <li>Item two</li>
  <li>Item three</li>
</ul>

Output:

  • Item one
  • Item two
  • Item three
Developer Tip: You can put almost anything inside an <li> tag, including images, links, or even other lists!

Types of Bullet Points

While the default bullet is a solid dot, the list-style-type CSS property gives you control over the visual marker. Although you can use inline styles (as shown below), in professional projects, you would typically define these in an external CSS file.

1. Disc (default)

The "disc" is the standard solid bullet point used by all modern browsers if no other style is specified.

<ul style="list-style-type: disc;">
  <li>Item one</li>
  <li>Item two</li>
  <li>Item three</li>
</ul>

Output:

  • Item one
  • Item two
  • Item three

2. Circle

The "circle" style creates an unfilled, hollow round marker.

<ul style="list-style-type: circle;">
  <li>Item one</li>
  <li>Item two</li>
  <li>Item three</li>
</ul>

Output: 

â—‹ Item one
â—‹ Item two
â—‹ Item three

3. Square

The "square" style uses a solid rectangular block as the marker.

<ul style="list-style-type: square;">
  <li>Item one</li>
  <li>Item two</li>
  <li>Item three</li>
</ul>

Output:

â–  Item one
â–  Item two
â–  Item three

Developer Tip: To remove bullets entirely (common for sidebars or navbars), use list-style-type: none; in your CSS.

Nesting Unordered Lists

Nesting is the process of putting one list inside another. This is the standard way to create multi-level navigation menus or detailed outlines. To nest correctly, the second <ul> must be placed inside an <li> tag of the parent list.

Watch Out: A common error is closing the parent <li> tag before starting the nested <ul>. Ensure the sub-list is a child of the list item it belongs to. 
<ul>
  <li>Fruits
    <ul>
      <li>Apple</li>
      <li>Banana</li>
    </ul>
  </li>
  <li>Vegetables
    <ul>
      <li>Carrot</li>
      <li>Broccoli</li>
    </ul>
  </li>
</ul>

Output:

  • Fruits
    • Apple
    • Banana
  • Vegetables
    • Carrot
    • Broccoli

Customizing Bullet Points

You can apply styles to the entire list or target specific list items to mix and match markers. This is useful for creating legend-style lists or emphasizing specific entries.

<ul style="list-style-type: none;">
  <li style="list-style-type: disc;">Item one</li>
  <li style="list-style-type: circle;">Item two</li>
  <li style="list-style-type: square;">Item three</li>
</ul>

Output:

  • Item one
  • Item two
  • Item three
Best Practice: For advanced designs, use the CSS ::before pseudo-element or list-style-image to use custom SVG icons or emojis as your bullets.

Summary

HTML unordered lists (<ul>) are a fundamental tool for grouping items logically and semantically. By mastering the parent-child relationship between <ul> and <li>, you can create everything from simple bulleted notes to complex, multi-level dropdown menus. Remember to use the list-style-type property to control the appearance, and always ensure your nesting is syntactically correct for the best accessibility and SEO results.

Previous