HTML Lists

Learn how to create and manage lists in HTML

1. Types of HTML Lists

HTML supports three types of lists: unordered, ordered, and description lists. Each has specific use cases and is structured differently.

2. Unordered Lists

Unordered lists display items with bullet points and are created using the <ul> (unordered list) tag. Each item is wrapped in a <li> (list item) tag.

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

Result:

  • Item 1
  • Item 2
  • Item 3

3. Ordered Lists

Ordered lists display items with numbers and are created using the <ol> (ordered list) tag. Each item is wrapped in a <li> tag.

<ol>
    <li>Step 1</li>
    <li>Step 2</li>
    <li>Step 3</li>
</ol>

Result:

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

4. Description Lists

Description lists are used for terms and definitions and are created using the <dl> (description list) tag, with <dt> for the term and <dd> for the definition.

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

Result:

HTML
HyperText Markup Language
CSS
Cascading Style Sheets

5. Nested Lists

You can nest lists by placing one list inside a list item of another. This is useful for creating sub-lists or hierarchical data.

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

Result:

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

6. Styling Lists

Lists can be styled using CSS to change bullet styles, indentation, and positioning. The list-style-type property is used to customize bullets or numbering.

<style>
ul.custom-bullets {
    list-style-type: square;
}

ol.custom-numbers {
    list-style-type: upper-roman;
}
</style>

<ul class="custom-bullets">
    <li>Bullet item 1</li>
    <li>Bullet item 2</li>
</ul>

<ol class="custom-numbers">
    <li>Numbered item 1</li>
    <li>Numbered item 2</li>
</ol>

Result:

  • Bullet item 1
  • Bullet item 2
  1. Numbered item 1
  2. Numbered item 2

7. Customizing Bullet Styles with Images

You can customize bullet points in unordered lists by using images as bullets with the list-style-image property.

<style>
ul.custom-bullets {
    list-style-image: url('https://via.placeholder.com/15');
}
</style>

<ul class="custom-bullets">
    <li>Custom bullet item 1</li>
    <li>Custom bullet item 2</li>
</ul>

Result:

  • Custom bullet item 1
  • Custom bullet item 2

8. Reversing an Ordered List

Use the reversed attribute on ordered lists to display numbers in descending order.

<ol reversed>
    <li>Step 3</li>
    <li>Step 2</li>
    <li>Step 1</li>
</ol>

Result:

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

9. Starting an Ordered List from a Specific Number

Use the start attribute to begin an ordered list from a specific number.

<ol start="5">
    <li>Step 5</li>
    <li>Step 6</li>
    <li>Step 7</li>
</ol>

Result:

  1. Step 5
  2. Step 6
  3. Step 7

10. Horizontal Lists

Lists can be styled to display horizontally, often used for navigation menus or inline items.

<style>
ul.horizontal-list {
    list-style-type: none;
    padding: 0;
    display: flex;
    gap: 1rem;
}
</style>

<ul class="horizontal-list">
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
</ul>

Result:

  • Home
  • About
  • Contact

11. Styling List Markers

The list-style-position property allows you to control the position of list markers (inside or outside the content box).

<style>
ul.inside-markers {
    list-style-position: inside;
}
ul.outside-markers {
    list-style-position: outside;
}
</style>

<ul class="inside-markers">
    <li>Inside marker 1</li>
    <li>Inside marker 2</li>
</ul>

<ul class="outside-markers">
    <li>Outside marker 1</li>
    <li>Outside marker 2</li>
</ul>

Result:

  • Inside marker 1
  • Inside marker 2
  • Outside marker 1
  • Outside marker 2

12. Removing List Markers

List markers can be removed with the list-style-type: none; property, often used for navigation menus.

<style>
ul.no-markers {
    list-style-type: none;
}
</style>

<ul class="no-markers">
    <li>No marker 1</li>
    <li>No marker 2</li>
</ul>

Result:

  • No marker 1
  • No marker 2

Additional Resources