ZetCode

HTML List Types

last modified March 3, 2025

HTML List Types tutorial shows how to create different structural forms of lists in HTML, including unordered, ordered, definition, and more.

HTML Lists

HTML Lists are used to organize and display items in a structured format. Introduced in early HTML, lists are essential for creating menus, outlines, and key-value pairs.

List Structures

Lists can be structured in various ways depending on the data's purpose. This tutorial covers different types of lists with examples rendered below each code snippet.

HTML List Types Examples

In the following examples, we explore different list structures with sample data. Basic CSS is included in the head for consistent styling.

1. Basic Unordered List

A simple list with bullet points, using <ul> for unordered items.

Basic Unordered List Example 
<ul>
    <li>Apple</li>
    <li>Banana</li>
    <li>Orange</li>
    <li>Grape</li>
</ul>

Rendered output:

2. Basic Ordered List

A numbered list using <ol> for ordered items.

Basic Ordered List Example 
<ol>
    <li>First Step</li>
    <li>Second Step</li>
    <li>Third Step</li>
    <li>Fourth Step</li>
</ol>

Rendered output:

  1. First Step
  2. Second Step
  3. Third Step
  4. Fourth Step

3. Nested Unordered List

An unordered list with sublists, showing hierarchy.

Nested Unordered List Example 
<ul>
    <li>Fruits
        <ul>
            <li>Apple</li>
            <li>Banana</li>
            <li>Orange</li>
        </ul>
    </li>
    <li>Vegetables
        <ul>
            <li>Carrot</li>
            <li>Broccoli</li>
            <li>Spinach</li>
        </ul>
    </li>
</ul>

Rendered output:

4. Nested Ordered List

An ordered list with numbered sublists, often used for outlines.

Nested Ordered List Example 
<ol>
    <li>Chapter 1
        <ol>
            <li>Section 1.1</li>
            <li>Section 1.2</li>
            <li>Section 1.3</li>
        </ol>
    </li>
    <li>Chapter 2
        <ol>
            <li>Section 2.1</li>
            <li>Section 2.2</li>
            <li>Section 2.3</li>
        </ol>
    </li>
</ol>

Rendered output:

  1. Chapter 1
    1. Section 1.1
    2. Section 1.2
    3. Section 1.3
  2. Chapter 2
    1. Section 2.1
    2. Section 2.2
    3. Section 2.3

5. Definition List

A list of terms and descriptions using <dl>, <dt>, and <dd>.

Definition List Example 
<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language</dd>
    <dt>CSS</dt>
    <dd>Cascading Style Sheets</dd>
    <dt>JS</dt>
    <dd>JavaScript</dd>
    <dt>PHP</dt>
    <dd>PHP: Hypertext Preprocessor</dd>
</dl>

Rendered output:

HTML
HyperText Markup Language
CSS
Cascading Style Sheets
JS
JavaScript
PHP
PHP: Hypertext Preprocessor

6. Horizontal Unordered List

An unordered list styled horizontally using CSS.

Horizontal Unordered List Example 
<ul style="list-style: none; display: flex;">
    <li>Home</li>
    <li>About</li>
    <li>Services</li>
    <li>Contact</li>
</ul>

Rendered output:

7. Reversed Ordered List

An ordered list counting down using the reversed attribute.

Reversed Ordered List Example 
<ol reversed>
    <li>Step 4</li>
    <li>Step 3</li>
    <li>Step 2</li>
    <li>Step 1</li>
</ol>

Rendered output:

  1. Step 4
  2. Step 3
  3. Step 2
  4. Step 1

8. Custom Marker Ordered List

An ordered list with a custom numbering style using the type attribute.

Custom Marker Ordered List Example 
<ol type="A">
    <li>Alpha</li>
    <li>Beta</li>
    <li>Gamma</li>
    <li>Delta</li>
</ol>

Rendered output:

  1. Alpha
  2. Beta
  3. Gamma
  4. Delta

9. Mixed List (Unordered and Ordered)

A combination of unordered and ordered lists for complex structures.

Mixed List Example 
<ul>
    <li>Category A
        <ol>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ol>
    </li>
    <li>Category B
        <ol>
            <li>Item 4</li>
            <li>Item 5</li>
            <li>Item 6</li>
        </ol>
    </li>
</ul>

Rendered output:

10. Definition List with Multiple Descriptions

A definition list where terms have multiple descriptions.

Definition List with Multiple Descriptions Example 
<dl>
    <dt>Python</dt>
    <dd>A programming language</dd>
    <dd>Created by Guido van Rossum</dd>
    <dt>Java</dt>
    <dd>A programming language</dd>
    <dd>Developed by Sun Microsystems</dd>
</dl>

Rendered output:

Python
A programming language
Created by Guido van Rossum
Java
A programming language
Developed by Sun Microsystems

In this tutorial, we have explored various structural forms of HTML lists, demonstrating how to organize items in different layouts with visible examples.

List all HTML tutorials.