Skip to main content

🙋🏻 HTML Lists

HTML lists are used to organize and structure content on a web page. They allow you to create ordered lists, unordered lists, and definition lists to present information in a structured way. In this tutorial, you will learn about the different types of HTML lists and how to use them in your web pages.

HTML Ordered List​

HTML ordered lists are defined with the <ol> tag. The <ol> tag is used to create a list of items that are ordered by a sequence of numbers or letters. Each item in the list is defined with the <li> tag. The numbering of the list items is automatically generated by the browser.

index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Ordered List Example</title>
  </head>
  <body>
    <h1>This is a Heading</h1>
    <ol>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ol>
  </body>
</html>
http://.../index.html

This is a Heading

  1. Item 1
  2. Item 2
  3. Item 3

In the example above, the <ol> tag is used to create an ordered list with three items: "Item 1", "Item 2", and "Item 3".

HTML Unordered List​

HTML unordered lists are defined with the <ul> tag. The <ul> tag is used to create a list of items that are unordered and displayed with bullet points. Each item in the list is defined with the <li> tag.

index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Unordered List Example</title>
  </head>
  <body>
    <h1>This is a Heading</h1>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </body>
</html>
http://.../index.html

This is a Heading

  • Item 1
  • Item 2
  • Item 3

In the example above, the <ul> tag is used to create an unordered list with three items: "Item 1", "Item 2", and "Item 3".

HTML Definition List​

HTML definition lists are defined with the <dl> tag. The <dl> tag is used to create a list of items that are defined with terms and descriptions. Each term in the list is defined with the <dt> tag, and each description is defined with the <dd> tag.

index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Definition List Example</title>
  </head>
  <body>
    <h1>This is a Heading</h1>
    <dl>
      <dt>Term 1</dt>
      <dd>Description 1</dd>
      <dt>Term 2</dt>
      <dd>Description 2</dd>
      <dt>Term 3</dt>
      <dd>Description 3</dd>
    </dl>
  </body>
</html>
http://.../index.html

This is a Heading

Term 1
Description 1
Term 2
Description 2
Term 3
Description 3

In the example above, the <dl> tag is used to create a definition list with three terms and descriptions.

HTML Nested Lists​

HTML lists can be nested inside one another to create a hierarchical structure. You can nest ordered lists, unordered lists, and definition lists inside one another to organize content in a structured way.

index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Nested List Example</title>
  </head>
  <body>
    <h1>This is a Heading</h1>
    <ol>
      <li>Item 1
        <ul>
          <li>Subitem 1</li>
          <li>Subitem 2</li>
        </ul>
      </li>
      <li>Item 2
        <ol>
          <li>Subitem 1</li>
          <li>Subitem 2</li>
        </ol>
      </li>
    </ol>
  </body>
</html>
http://.../index.html

This is a Heading

  1. Item 1

    • Subitem 1
    • Subitem 2

  2. Item 2

    1. Subitem 1
    2. Subitem 2

In the example above, an ordered list is nested inside another ordered list to create a hierarchical structure with subitems.

Summary​

HTML lists are a powerful way to organize and structure content on a web page. You can use ordered lists, unordered lists, and definition lists to present information in a structured way. You can also nest lists inside one another to create a hierarchical structure. By using HTML lists effectively, you can create well-organized and easy-to-read web pages.