HTML Lists

Keywords

html, lists, html lists, dataidea, data science, web development, website

Photo by DATAIDEA

HTML Lists

HTML lists are used to organize and display information in a structured format. There are three main types of lists in HTML: ordered lists (<ol>), unordered lists (<ul>), and definition lists (<dl>). Understanding how to create and style lists is essential for organizing content effectively on web pages.

Ordered Lists (<ol>)

Ordered lists are used to present items in a numbered sequence. Each item in the list is defined using the <li> (list item) element.

Example:

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

In this example, each item is automatically numbered by the browser.

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

Unordered Lists (<ul>)

Unordered lists are used to present items in a bulleted or unordered sequence. Each item in the list is defined using the <li> element.

Example:

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

In this example, each item is displayed with a bullet point by default.

  • First item
  • Second item
  • Third item

Definition Lists (<dl>)

Definition lists are used to display terms and their corresponding definitions. Each term is defined using the <dt> (definition term) element, and each definition is defined using the <dd> (definition description) element.

Example:

<dl>
  <dt>Term 1</dt>
  <dd>Definition 1</dd>
  <dt>Term 2</dt>
  <dd>Definition 2</dd>
</dl>

In this example, each term is followed by its definition.

Term 1
Definition 1
Term 2
Definition 2

Additional List Attributes

1. Type Attribute (for Ordered Lists)

The type attribute specifies the type of numbering used in ordered lists. Common values include 1 (decimal), A (uppercase alphabetical), a (lowercase alphabetical), I (uppercase Roman numeral), and i (lowercase Roman numeral).

Example:

<ol type="A">
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>
  1. First item
  2. Second item
  3. Third item

2. Start Attribute (for Ordered Lists)

The start attribute specifies the starting value for the numbering in ordered lists.

Example:

<ol start="5">
  <li>Fifth item</li>
  <li>Sixth item</li>
  <li>Seventh item</li>
</ol>
  1. Fifth item
  2. Sixth item
  3. Seventh item

3. Compact Attribute (for Lists)

The compact attribute specifies whether to reduce the spacing between list items.

Example:

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

Example of a Fully Utilized List

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HTML List Example</title>
  <style>
    li {
      margin-bottom: 8px;
    }
  </style>
</head>
<body>
  <h2>Ordered List</h2>
  <ol type="I">
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
  </ol>
  
  <h2>Unordered List</h2>
  <ul compact>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
  </ul>
  
  <h2>Definition List</h2>
  <dl>
    <dt>Term 1</dt>
    <dd>Definition 1</dd>
    <dt>Term 2</dt>
    <dd>Definition 2</dd>
  </dl>
</body>
</html>

Result:

<!DOCTYPE html> HTML List Example

Ordered List

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

Unordered List

  • First item
  • Second item
  • Third item

Definition List

Term 1
Definition 1
Term 2
Definition 2

Nested HTML Lists:

Sometimes we to nest lists to make the data we represent easier to understand.

Here’s an example of nesting HTML Lists.

<ul>
    <li>General Data</li>
    <li>
        <!-- We put another list inside an li element -->
        <ul>
            <li>Specific Data</li>
            <li>Specific Data</li>
            <li>Specific Data</li>
        </ul>
    </li>
    <li>Other General Data</li>
    <li>
        <!-- We put another list inside an li element -->
        <ul>
            <li>Other Specific Data</li>
            <li>Other Specific Data</li>
            <li>Other Specific Data</li>
        </ul>
    </li>
</ul>
Output:
  • General Data
    • Specific Data
    • Specific Data
    • Specific Data
  • Other General Data
    • Other Specific Data
    • Other Specific Data
    • Other Specific Data

Note!

There’s no limitation to the depth of nesting lists

To be among the first to hear about future updates of the course materials, simply enter your email below, follow us on (formally Twitter), or subscribe to our YouTube channel.

Conclusion

HTML lists are versatile tools for organizing and presenting information on web pages. Whether you need to display a sequence of items, a collection of terms and definitions, or an unordered set of items, HTML lists provide a simple and effective way to structure your content. Understanding how to use lists and their attributes allows you to create clear and well-organized web pages.

Back to top