Unordered Lists

An unordered list is created with the <ul> tag. Each list item is marked up with the <li> tag. By default the browser renders a bullet point (disc) before each item. Use unordered lists when the sequence of items does not matter.

Changing the Bullet Style

The CSS list-style-type property changes the bullet marker. Common values are disc (filled circle, default), circle (hollow circle), square, and none (removes bullets entirely). Use list-style-image to use a custom image as a bullet. You can also use CSS content on the ::before pseudo-element for full control.

list-style-type: disc — Default filled bullet
list-style-type: circle — Hollow circle
list-style-type: square — Filled square
list-style-type: none — No bullet

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Unordered Lists</title>
  <style>
    ul.square   { list-style-type: square; }
    ul.none     { list-style-type: none; padding: 0; }
    ul.none li  { padding: 4px 0; border-bottom: 1px solid #eee; }
  </style>
</head>
<body>
  <h1>Shopping List</h1>
  <ul>
    <li>Apples</li>
    <li>Bread</li>
    <li>Milk</li>
  </ul>

  <h2>Square Bullets</h2>
  <ul class="square">
    <li>Item one</li>
    <li>Item two</li>
  </ul>

  <h2>No Bullets (menu style)</h2>
  <ul class="none">
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
  </ul>
</body>
</html>

HTML

Full Editor

Pro Tip

Set list-style-type: none and padding: 0; margin: 0 on <ul> when building navigation menus — it removes the default bullets and indent, giving you a clean baseline to style with Flexbox.

Related Resources

HTML Reference

Complete tag & property list

HTML How-To Guides

Step-by-step practical guides

HTML Exercises

Practice what you've learned