Skip to main content

HTML Unordered Lists

Unordered Lists are used to structure content when the sequence of the items does not matter. Think of shopping lists, feature bullets, or navigation menus, the items are related, but reading them in a different order doesn't change their meaning.

In HTML, the unordered list is built using two tags:

  1. <ul> (Unordered List): The container that defines the start and end of the list.
  2. <li> (List Item): Defines each individual item within the list.

By default, the browser renders each <li> with a bullet point (or disc).


Creating an Unordered List​

To create a functional list, you must always wrap all <li> elements inside a parent <ul> element.

index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Unordered List Example</title>
</head>
<body>
  <h1>My Favorite Fruits</h1>
  <ul>
    <li>Apple</li>
    <li>Orange</li>
    <li>Banana</li>
  </ul>
</body>
</html>
http://.../index.html

My Favorite Fruits

  • Apple
  • Orange
  • Banana

The Semantic Power of <ul>​

Using <ul> provides semantic meaning, which is crucial for modern web development:

  • Navigation Menus: Nearly all website navigation bars are built using <ul> and <li> elements, even if CSS removes the bullet points and lines them up horizontally. The semantic meaning is "a list of links."
  • Accessibility: Screen readers correctly identify the structure as a list, informing users how many items are present.
  • Clear Structure: It visually separates content, making complex information easier to digest and scan.

Creating Nested Lists (Hierarchy)​

You can easily nest one list inside another to create hierarchical outlines, categories, or sub-menus. To nest a list, simply place a new <ul> tag inside an <li> element.

index.html: Nested List Example
<ul>
  <li>Fruits
    <ul>
      <li>Apple</li>
      <li>Orange</li>
      <li>Banana</li>
    </ul>
  </li>
  <li>Vegetables
    <ul>
      <li>Carrot</li>
      <li>Broccoli</li>
      <li>Spinach</li>
    </ul>
  </li>
</ul>
http://.../index.html

  • Fruits

    • Apple
    • Orange
    • Banana

  • Vegetables

    • Carrot
    • Broccoli
    • Spinach

Notice that the browser automatically changes the marker type (from a solid disc to a circle) to help distinguish between levels.


Customizing Lists: Focus on CSS​

While the historical HTML attribute type was once used to change the bullet style (disc, circle, square), this is now considered deprecated and should be handled exclusively by CSS. HTML defines the structure (it is a list), and CSS defines the presentation (it looks like a square).

Using CSS for Styling​

The modern, correct way to customize the appearance of an unordered list marker is using the list-style-type CSS property.

styles.css: Customizing the Marker
/* Selects all unordered lists */
ul {
  /* Changes the bullet point from a disc to a square */
  list-style-type: square; 
  /* Changes the color of the text and the marker */
  color: #007bff; 
}

By keeping the styling in CSS, you ensure your HTML remains clean, semantic, and easy to maintain across your entire website.

Deprecated Attribute: The Old type​

The type attribute on the <ul> tag should be avoided in modern development:

Avoid This Practice
<ul type="circle">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
http://.../index.html
  • Item 1
  • Item 2
  • Item 3

Conclusion​

The unordered list (<ul>) is a fundamental element for grouping non-sequential items in HTML. It offers great flexibility for everything from navigation to bulleted content. While simple in structure, its semantic correctness is key to building accessible and well-structured web pages.