Skip to main content

List Tags

HTML, or HyperText Markup Language, is the standard language for creating web pages and web applications. One of the most common elements you will use when creating a web page is a list. HTML provides us with several different types of lists, each useful in different scenarios. In this tutorial, we will discuss three main types of HTML list tags:

  1. Unordered lists
  2. Ordered lists
  3. Definition lists

Unordered Lists​

Unordered lists, also known as bullet lists, are used when you have a list of items that do not need to be in a specific order. The syntax for an unordered list is:

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

In the above code, <ul> stands for 'unordered list'. Each item within the list is represented by <li> which stands for 'list item'.

Ordered Lists​

Ordered lists, also known as numbered lists, are used when you have a list of items that need to be in a specific order. The syntax for an ordered list is:

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

In the above code, <ol> stands for 'ordered list'. Just like with unordered lists, each item within the list is represented by <li>.

Definition Lists​

Definition lists are used to list terms along with their definitions. The syntax for a definition list is:

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

In the above code, <dl> stands for 'definition list'. <dt> is used to identify the term being defined and <dd> is used to provide the definition of the term.

Nesting Lists​

One of the powerful features of HTML lists is that they can be nested. That means you can have a list within a list. Here's an example of how to nest lists:

<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>

In the above example, we have an unordered list with three items. The second item has another unordered list nested within it.

Learning how to use list tags in HTML is essential for structuring content on your web pages. Practice creating different types of lists and nesting them to become more comfortable with these tags.