HTML List

HTML lists allow you to display information in a structured, organized manner. Lists can be used to present items in a specific order or without any particular order. There are three types of lists in HTML: ordered, unordered, and definition lists. In this tutorial, we’ll go over each of these list types and provide examples of how to use them.

1. Unordered List

An unordered list, also known as a bulleted list, displays a list of items with a bullet point before each item. To create an unordered list in HTML, use the <ul> tag and wrap each list item in <li> tags. Here’s an example:

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

This will create an unordered list with three items, each with a bullet point:

• Item 1
• Item 2
• Item 3

You can also nest unordered lists within other unordered lists to create sub-lists. To do this, simply indent the nested <ul> and <li> tags:

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

This will create an unordered list with three items, with the second item having a nested unordered list:

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

2. Ordered List

An ordered list, also known as a numbered list, displays a list of items with a number before each item. To create an ordered list in HTML, use the <ol> tag and wrap each list item in <li> tags. Here’s an example:

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

This will create an ordered list with three items, each with a number:

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

Just like with unordered lists, you can nest ordered lists within other ordered lists to create sub-lists:

<ol>
  <li>Item 1</li>
  <li>Item 2
    <ol>
      <li>Sub-item 1</li>
      <li>Sub-item 2</li>
    </ol>
  </li>
  <li>Item 3</li>
</ol>

This will create an ordered list with three items, with the second item having a nested ordered list:

1. Item 1
2. Item 2
   1. Sub-item 1
   2. Sub-item 2
3. Item 3

3. Definition List

A definition list displays a list of terms and their definitions. To create a definition list in HTML, use the <dl> tag and wrap each term in <dt> tags and each definition in <dd> tags. Here’s an example:

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

This will create a definition list with three terms and their definitions:

Term 1

Definition 1

Term 2

Definition 2

Term 3

Definition 3

You can also nest definition lists within other definition lists to create sub-definitions. To do this, simply indent the nested <dl>, <dt>, and <dd> tags:

<dl>
  <dt>Term 1</dt>
  <dd>Definition 1</dd>
  <dt>Term 2</dt>
  <dd>
    <dl>
      <dt>Sub-term 1</dt>
      <dd>Sub-definition 1</dd>
      <dt>Sub-term 2</dt>
      <dd>Sub-definition 2</dd>
    </dl>
  </dd>
  <dt>Term 3</dt>
  <dd>Definition 3</dd>
</dl>

This will create a definition list with three terms, with the second term having a nested definition list:

Term 1

Definition 1

Term 2

Sub-term 1

Sub-definition 1

Sub-term 2

Sub-definition 2

Term 3

Definition 3

HTML lists are a powerful way to structure and organize information on a webpage. By using the <ul>, <ol>, <li>, <dl>, <dt>, and <dd> tags, you can create structured lists that are easy to read and understand.