How to Make a HTML List

How to make a HTML List? HTML Lists are used to specify information lists. Every list can have one or more list elements.

In HTML, there are three types of lists:

1. Ordered <ol>
2. Unordered <ul>
3. Description <dl>

Unordered List

An unordered list is created using the <ul> tag.

An unordered list is made of items marked with bullets by default.

Each list item is created using the <li> tag.

Here is an example list of shopping items:

<ul>
  <li>Tea</li>
  <li>Milk</li>
  <li>Eggs</li>
</ul>

As you can see, the items are put between the <ul></ul> tags.

Ordered List

An ordered list uses numbers by default instead of bullets for the items.

It is created similar to the unordered list, and uses the <ol> tag instead of <ul> to wrap the items:

<ol>
  <li>Sam</li>
  <li>Amy</li>
  <li>Tom</li>
</ol>

This will create a numbered list of names.

Description List

A description list is a list of terms, with a description of each term.

Used for

• Terms and definitions
• Metadata topics and values
• Questions and answers
• Any other group of name-value data

The HTML description list contains the following three tags:

1. <dl> tag defines the start of the list.
2. <dt> tag defines a term.
3. <dd> tag defines the term definition (description).

Example:

<dl>
  <dt>Google</dt>
  <dd>
   Google LLC is an American multinational technology company that focuses on search engine technology, online advertising, cloud computing, computer software, quantum computing, e-commerce, artificial intelligence, and consumer electronics.
  </dd>

  <!-- Other terms and descriptions -->
</dl>

Learn more about the description list element.

Nested List

Lists can be nested inside other lists.

You can make a nested unordered list, a nested ordered list, or an ordered list nested inside an unordered list.

Example:

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk
  <ul>
      <li>Dairy</li>
      <li>Almond</li>
      <li>Oat</li>
      <li>Soya</li>
    </ul>
  </li>
</ul>

As you can see in this cafe drinks list, the unordered list is nested inside a list item of the another unordered list.

Remember, the list items have to open and close with <li> </li> tags and need to be wrapped in <ul> or <ol> tags to make a valid list.

Conclusion

That’s all there is to it! You now understand how to build ordered, unordered and description lists in HTML.

Continue your HTML learning by reading the following articles:

How to Create an HTML Boilerplate

What is an HTML Element? How do you create one?

Thank you for reading this article, keep on coding.