HTML Lists - Detailed Overview

Introduction to HTML Lists

HTML lists allow you to group a set of related items in lists, which can be ordered or unordered. This guide will cover the basic types of lists available in HTML and how to use them effectively.

Unordered Lists

An unordered list is created using the <ul> tag, and each list item is created using the <li> tag. Here’s an example:

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

The above code will create the following list:

  • Item 1
  • Item 2
  • Item 3

Ordered Lists

An ordered list is created using the <ol> tag, and each list item is created using the <li> tag. Ordered lists display items in a numbered sequence. Here’s an example:

<ol>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ol>

The above code will create the following list:

  1. First item
  2. Second item
  3. Third item

Nested Lists

HTML allows you to nest lists within each other. You can create a nested list by placing a <ul> or <ol> inside a <li>. Here’s an example:

<ul>
    <li>Item 1
        <ul>
            <li>Sub-item 1</li>
            <li>Sub-item 2</li>
        </ul>
    </li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

The above code will create the following nested list:

  • Item 1
    • Sub-item 1
    • Sub-item 2
  • Item 2
  • Item 3

Description Lists

A description list is created using the <dl> tag, with each term defined by a <dt> tag and each description by a <dd> tag. Here’s an example:

<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language</dd>
    <dt>CSS</dt>
    <dd>Cascading Style Sheets</dd>
</dl>

The above code will create the following description list:

HTML
HyperText Markup Language
CSS
Cascading Style Sheets