HTML Unordered Lists: `<ul>` and `<li>` with CSS Styling

Master creating bulleted lists in HTML using the `<ul>` and `<li>` tags. This tutorial covers basic unordered lists, customizing bullet styles with CSS (`list-style-type`), creating nested lists, and making horizontal lists for navigation menus. Includes code examples!

Creating Unordered Lists in HTML

Unordered lists (bulleted lists) are a simple yet effective way to present a series of items without implying a specific order. This chapter covers creating and styling unordered lists using HTML and CSS.

Basic Unordered Lists

An unordered list is created with the <ul> (unordered list) tag. Each item in the list is enclosed within a <li> (list item) tag. By default, list items are marked with bullets (filled circles).

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

            • Coffee

            • Tea

            • Milk
        

Customizing List Markers

The CSS list-style-type property lets you change the type of bullet used in the unordered list:

Nested Unordered Lists

You can create nested lists (lists within lists) by placing <ul> elements inside other <ul> or <li> elements.

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

Creating Horizontal Lists with CSS

Using CSS, you can easily style an unordered list to display horizontally, commonly used for navigation menus. The float: left; property is often employed for this.

ul {
  list-style-type: none; /* Remove default bullets */
  margin: 0;
  padding: 0;
  overflow: hidden; /* Prevents list items from wrapping */
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

This example removes default bullets, sets the list items to float left, and styles the links within.

Learn more about CSS styling in our CSS Tutorial.

Summary Table