HTML5 Lists

Web developers use HTML5 Lists to display a list of related items in an organized way. In this way, you make your content easily readable and prevent your viewer from getting exhausted with your content.

Unordered HTML5 List

Unordered HTML5 lists are represented with <ul> tag. Each item in the <ul> element begins with a <li> element.

The browser will place small black circles around every list item.

Example

<!DOCTYPE html>
<html>
<head>
    <title> HTML5 Lists </title>
</head>
<body>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JAVASCRIPT</li>
        <li>ES6</li>
        <li>C</li>
        <li>C++</li>
    </ul>
</body>
</html>

The output of this code will be

HTML5 Lists

Ordered HTML5 Lists

Ordered lists are defined with a <ol> tag. Each list item in an ordered list is represented with <li> element. The browser will, by default, add numbers to the list item.

Example

<!DOCTYPE html>
<html>
<head>
    <title> HTML5 Lists </title>
</head>
<body>
    <ol>
        <li>HTML</li>
        <li>CSS</li>
        <li>JAVASCRIPT</li>
        <li>ES6</li>
        <li>C</li>
        <li>C++</li>
    </ol>
</body>
</html>

The output of this code will be

HTML5 Lists

HTML Description Lists

Apart from ordered and unordered lists, HTML5 also supports a description list. A description list element represents a list of terms along with the definition of each term.

The <dl> tag represents description list and it contains <dt> tag that specifies the term name and <dd> tag that describes each term separately.

Example

<!DOCTYPE html>
<html>
<head>
    <title> HTML5 Lists </title>
</head>
<body>
    <h1> A Description List</h1>
    <dl>
        <dt>HTML</dt>
        <dd> - Hpertext Markup Language that was developed by Tim Berner Leed</dd>
        <dt>CSS</dt>
        <dd> - CSS decorates HTML elements</dd>
    </dl>
</body>
</html>

The output of this code will be

HTML5 Lists

Key Takeaways

<ul> tag specifies unordered lists
<ol> element displays ordered list
<li> displays a list item
<dl> specifies description list
<dt> specifies description term
<dl> explains each term in the description list

To learn more about lists, read its documentation.

Next Lesson » « Previous Lesson