HTML Lists

HTML provides some elements to group related items in a list, which can be any of the below types.

  • Unordered List
  • Ordered List
  • Description List

Unordered List

HTML element <ul> is used to define an unordered list with element <li> defining each item of the list as shown below.

  • Element <ul> to define an unordered list
  • Element <li> to define each item of a list

By default, each item on the list is marked with circular bullets.

Take a look at the article on HTML Unordered List to know more about the different bullet styles available.

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

Ordered List

HTML element <ol> is used to define an ordered list with element <li> defining each item of the list as shown below.

  • Element <ol> to define an ordered list
  • Element <li> to define each item of a list

By default, each item on the list is marked with numbers.

Take a look at the article on HTML Ordered List to know more about the different types of numbering available.

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

Description List

HTML element <dl> is used to define a description list with element <dt> defining each term and element <dd> defining its description as shown below.

  • Element <dl> to define a description list
  • Element <dt> to define each term of a list
  • Element <dd> to define a description of each term of a list

By default, each item on the list should be defined with <dt> element followed by <dd> element.

Take a look at the article on HTML Description List to know more about this type of list.

<dl>
    <dt>Term 1</dt>
    <dd>Description of term 1</dd>
    <dt>Term 2</dt>
    <dd>Description of term 2</dd>
    <dt>Term 3</dt>
    <dd>Description of term 3</dd>
</dl>

Examples

We can check the outcome of the below HTML document to see how it looks.

<!doctype html>
<html lang="en">
<head>
</head>
<body>
    <h1>HTML Lists</h1>
    <hr>
    <h2>Unordered List</h2>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
    <h2>Ordered List</h2>
    <ol>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ol>
    <h2>Description List</h2>
    <dl>
        <dt>Term 1</dt>
        <dd>Description of term 1</dd>
        <dt>Term 2</dt>
        <dd>Description of term 2</dd>
        <dt>Term 3</dt>
        <dd>Description of term 3</dd>
    </dl>
</body>
</html>

Overall

HTML lists are useful in grouping related items into a list.