Creating Unordered Lists in HTML using the `
` and `
` Elements

Learn how to structure and style unordered lists in HTML for improved content presentation. This tutorial covers creating basic and nested unordered lists using the `

` tags, customizing list markers with CSS, and best practices for creating readable and accessible lists.

Creating Unordered Lists in HTML

Understanding Unordered Lists

Unordered lists are used in HTML to present a collection of items where the order doesn't matter. They’re created using the `<ul>` (unordered list) tag, with each item in the list defined using the `<li>` (list item) tag. By default, browsers display these lists using bullets (small filled circles) at the beginning of each list item. This improves the structure and readability of your web pages. You can customize the appearance of unordered lists using CSS (Cascading Style Sheets).

Creating an Unordered List

To create a basic unordered list:

Basic Unordered List


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

Customizing List Markers with CSS

You can change the style of list markers using CSS. For instance, to change the type of bullet:

Example: Changing Bullet Style


ul {
  list-style-type: square; /* Use squares instead of discs */
}

Other options include `disc` (filled circle, default), `circle` (empty circle), and `none` (no markers).

Nested Lists

You can create nested lists (lists within lists) to represent hierarchical information:

Example: Nested List


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

This creates a hierarchical structure improving readability. List items (`<li>`) can contain other HTML elements.

Browser Support for `<ul>` and `<li>`

The `<ul>` and `<li>` elements are supported by all major modern browsers.

Browser	Support
Chrome	Yes
Edge	Yes
Firefox	Yes
Opera	Yes
Safari	Yes

Creating Unordered Lists in HTML using the `` and `` Elements