← Back to HTML Course | Chapter 2: Text, Formatting & Media | Lesson 24 of 26

HTML Unordered Lists

An unordered list is for a group of items where the order does not matter -- a shopping list, a set of features, a list of ingredients -- and each item is marked visually with a bullet point rather than a number, signaling to the reader that item order carries no special meaning.

In this page:

  1. Creating a Basic Unordered List
  2. Nesting Sublists
  3. Changing the Bullet Style
  4. Removing Bullets for Navigation Menus
  5. Using a Custom Image as a Marker

Creating a Basic Unordered List

<ul> wraps the whole list, and each individual item goes inside its own <li> (list item) tag. Browsers render each <li> with a bullet point by default, visually signaling that these items form a related but unordered group.

Note: Every piece of content in a list must be wrapped in its own <li>; text placed directly inside <ul> without an <li> wrapper is invalid.

Warning: Forgetting the closing </li> tag on an item can cause unpredictable nesting behavior in some browsers.

Example: Creating a Basic Unordered List

markup 
<ul>
  <li>Milk</li>
  <li>Bread</li>
</ul>

Nesting Sublists

A sublist is created by placing an entire new <ul> element inside a parent <li>, not after it -- this makes the sublist a genuine child of that specific item, and browsers automatically indent it and often switch the bullet style to visually distinguish nesting depth.

Note: Always place the nested ul fully inside the parent li's opening and closing tags to preserve correct nesting.

Warning: Placing a nested ul as a sibling after </li> instead of inside it breaks the semantic parent-child relationship of the sublist.

Example: Nesting Sublists

markup 
<ul>
  <li>Fruits
    <ul>
      <li>Apple</li>
    </ul>
  </li>
</ul>

Changing the Bullet Style

list-style-type controls the marker shape shown before each item -- disc (a filled circle, the default), circle (a hollow circle), or square (a filled square) -- letting you visually differentiate nested list levels or match a design's aesthetic.

Note: Use different list-style-type values across nesting levels to help readers visually distinguish how deep a sublist goes.

Warning: Changing list-style-type purely for decoration on a navigation menu still leaves the underlying semantic list structure intact for screen readers.

Example: Changing the Bullet Style

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

Removing Bullets for Navigation Menus

list-style: none removes the bullet marker entirely, which is the standard technique used to turn a semantically correct <ul> into a horizontal or vertical navigation menu, keeping the accessible list structure while visually looking nothing like a bulleted list.

Note: Prefer a real ul styled with list-style: none for navigation menus over a series of plain divs, to keep the semantic list structure for assistive technology.

Warning: Removing default margin and padding is usually needed alongside list-style: none, since browsers still apply default list indentation even without visible bullets.

Example: Removing Bullets for Navigation Menus

markup 
<ul style="list-style: none;">
  <li><a href="/">Home</a></li>
  <li><a href="/about">About</a></li>
</ul>

Using a Custom Image as a Marker

list-style-image lets you replace the default bullet shape with a small custom image, useful for a branded checklist look, though modern CSS often achieves more consistent, scalable results using a ::marker pseudo-element or a background-image on the li instead.

Note: Prefer sizing your marker image carefully or use the ::marker pseudo-element for more reliable, consistent cross-browser positioning than list-style-image alone.

Warning: list-style-image gives limited control over the marker's exact size and position compared to styling ::marker or using a background-image trick.

Example: Using a Custom Image as a Marker

markup 
<ul style="list-style-image: url('check.png');">
  <li>Completed step</li>
</ul>
Common Mistakes
  1. Placing text or other content directly inside <ul> without wrapping it in an <li> element, which is invalid HTML.
  2. Nesting a new <ul> as a sibling of <li> instead of inside it, which breaks the visual and semantic nesting of a sublist.
  3. Using list-style: none purely to remove bullets from a navigation menu without considering that this can affect how some screen readers announce list semantics.
Chapter Summary
  • <ul> creates an unordered (bulleted) list, and every item inside it must be wrapped in its own <li> element.
  • A nested sublist must be placed entirely inside its parent <li>, not as a sibling after it.
  • list-style-type controls the bullet marker shape (disc, circle, square), and list-style: none removes markers entirely.
Browser Support

<ul> and <li> have been part of HTML since its earliest versions and are supported in every browser.

🔒

Chapter Quiz — Complete all 26 topics to unlock

0/26 topics done

Complete these topics first:

← Previous Lesson HTML Lists Next Lesson → HTML Ordered Lists

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.