HTML CSS - Lists

Creating ordered and unordered lists

Lists are a common way to organize information on web pages. HTML provides two types of lists: ordered lists and unordered lists. Ordered lists are numbered, while unordered lists use bullets. This tutorial covers how to create and use both types of lists in HTML.

Ordered Lists

Ordered lists are used to present items in a numbered sequence. The <ol> element is used to create an ordered list, and each list item is placed inside an <li> (list item) element. Here is an example:

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

This will produce the following list:

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

Unordered Lists

Unordered lists are used to present items without any particular order. The <ul> element is used to create an unordered list, and each list item is placed inside an <li> element. Here is an example:

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

This will produce the following list:

• First item
• Second item
• Third item

Nesting Lists

You can nest lists inside other lists to create a hierarchical structure. Here is an example of a nested list:

<ul>
    <li>Item 1
        <ul>
            <li>Subitem 1.1</li>
            <li>Subitem 1.2</li>
        </ul>
    </li>
    <li>Item 2</li>
    <li>Item 3
        <ol>
            <li>Subitem 3.1</li>
            <li>Subitem 3.2</li>
        </ol>
    </li>
</ul>
            

This will produce the following nested list:

• Item 1
  • Subitem 1.1
  • Subitem 1.2
• Item 2
• Item 3
  1. Subitem 3.1
  2. Subitem 3.2

Customizing List Style

You can customize the appearance of lists using CSS. Here are some examples:

<style>
    /* Custom bullet style for unordered lists */
    ul.custom-bullets {
        list-style-type: square;
    }

    /* Custom numbering style for ordered lists */
    ol.custom-numbers {
        list-style-type: upper-roman;
    }
</style>

<ul class="swf-lsn-custom-bullets">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

<ol class="swf-lsn-custom-numbers">
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ol>
            

This will produce the following customized lists:

• Item 1
• Item 2
• Item 3

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

Description Lists

HTML also provides description lists for name/value pairs. Description lists use the <dl> element, with <dt> for the term/name and <dd> for the description. Here is an example:

<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language</dd>
    <dt>CSS</dt>
    <dd>Cascading Style Sheets</dd>
    <dt>JavaScript</dt>
    <dd>Programming language for web development</dd>
</dl>
            

This will produce the following description list:

HTML

HyperText Markup Language

CSS

Cascading Style Sheets

JavaScript

Programming language for web development

Summary

In this tutorial, you learned how to create ordered and unordered lists in HTML using the <ol> and <ul> elements, respectively. You also explored nesting lists, customizing list styles with CSS, and creating description lists using the <dl> element. Understanding how to use lists is essential for organizing content effectively on web pages.