HTML Lists

Section 9: Ordered, Unordered and Description Lists

HTML lists help organize related information into meaningful groups. They are used for navigation menus, learning objectives, product features, instructions, frequently asked questions, glossaries and many other parts of a website.

In this lesson, you will learn all three main HTML list types, their attributes, nested lists, semantic meaning, accessibility considerations and practical implementation patterns.

1. Learning Objectives

By the end of this lesson, you will be able to:

• Understand the purpose of HTML lists.
• Create unordered lists using ul and li.
• Create ordered lists using ol and li.
• Control ordered-list numbering using start, reversed and value.
• Create description lists using dl, dt and dd.
• Build nested lists with correct HTML structure.
• Choose the correct list type for different situations.
• Understand semantic HTML, accessibility and list structure.
• Avoid common HTML list mistakes.
• Build practical lists for real-world websites.

2. What Is an HTML List?

An HTML list groups related items into a structured collection. The browser usually displays lists with markers or numbering, depending on the list type and styling.

HTML provides three main list types:

• Unordered list: ul, for items whose sequence is not inherently important.
• Ordered list: ol, for items whose sequence or ranking matters.
• Description list: dl, for terms and their associated descriptions or values.

List items in unordered and ordered lists are represented using li elements. Description lists use dt for terms and dd for their associated descriptions or values.

3. Unordered Lists

An unordered list represents a collection of items where changing the sequence does not normally change the meaning.

Use the ul element to create an unordered list and li elements for its items.

Basic Syntax

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

The browser generally displays this list with bullet markers.

Example: Course Topics

<h2>What You Will Learn</h2>

<ul>
    <li>HTML fundamentals</li>
    <li>Semantic HTML</li>
    <li>Forms and validation</li>
    <li>Accessibility basics</li>
</ul>

Use unordered lists for collections such as:

• Features of a product.
• Required documents.
• Skills in a developer profile.
• Topics covered by a course.
• Ingredients in a recipe when sequence is not important.

Important Rule

Direct children of ul should be list items, apart from permitted script-supporting elements. Do not place arbitrary p or div elements directly inside ul and expect them to become list items.

4. Ordered Lists