HTML Unordered Lists

In this section of our HTML tutorial, we will explore unordered lists, an essential element for structuring and presenting information on web pages. We’ll cover the basic usage of the <ul> (unordered list) and <li> (list item) elements and provide examples for a better understanding.

Unordered Lists (<ul>) Overview

Unordered lists are used to present a list of items where the order doesn’t matter. Each item in an unordered list is typically preceded by a bullet point, though the appearance can vary based on CSS styling. Unordered lists are ideal for scenarios like navigation menus, features lists, or any situation where item sequence isn’t crucial.

Basic Syntax

Here is the basic syntax for creating an unordered list using the <ul> and <li> elements in HTML:

In this example, we have an unordered list containing three list items. Each list item is represented by an <li> element.

Common List Styling

Unordered lists can be styled using CSS to change the appearance of the bullet points. You can change the type of bullet point or even use custom images as list markers. Here’s an example of custom bullet points using CSS:

For more about CSS list styling, you can check the CSS Lists Tutorial.

Nested Lists

Unordered lists can also be nested within one another to create hierarchical structures. For example, you can use a nested list to represent subcategories within a main category.

Nested lists can be used for site navigation, outlining content, or any situation where you need to represent a hierarchy.

Code Examples

Here are additional examples of unordered lists to illustrate different use cases:

Simple Unordered List:

Custom Bullet Points with CSS:

Nested Unordered List:


Unordered lists created with <ul> and <li> elements are versatile tools for structuring content on web pages. They allow you to present information in a clear and organized manner, and with CSS styling, you can customize the appearance of list markers to suit your design. Whether you’re creating navigation menus, feature lists, or outlining content, understanding how to use unordered lists is a fundamental skill in web development.