Lesson 7 – HTML5 Lists

Lists are used in HTML5 to organize and arrange similar content. There are two types of lists in HTML5, the ordered lists, and unordered lists.

The Unordered List

The unordered list does not order its items by numbers or letters. Each item in the unordered list starts with a bullet item. We use the unordered list <ul> tag to create such a list. Each item in the list is enclosed in an opening and closing list <li> tag. The following example demonstrates how to create an unordered list.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Lists</title>
</head>
<body>
    <h1>List of Social Media Websites</h1>

    <ul>
        <li><a href="https://www.facebook.com">Facebook</a></li>
        <li><a href="https://www.instagram.com">Instagram</a></li>
        <li><a href="https://www.twitter.com">Twitter</a></li>
        <li><a href="https://www.Linked.com">LinkedIn</a></li>
    </ul>
</body>
</html>

The browser will render the above code as under.

The Ordered List

The ordered list properly orders its items, each of which starts with a number or letter in ascending or descending order. We replaces <ul> tag with an ordered list tag <ol> to create an ordered list. The remaining markup almost remains the same. Take a look at the following code snippet.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Lists</title>
</head>
<body>
    <h1>List of Social Media Websites</h1>

    <ol>
        <li><a href="https://www.facebook.com">Facebook</a></li>
        <li><a href="https://www.instagram.com">Instagram</a></li>
        <li><a href="https://www.twitter.com">Twitter</a></li>
        <li><a href="https://www.Linked.com">LinkedIn</a></li>
    </ol>
</body>
</html>

This is how it will look in the browser.

Nested lists

Just like other elements, you can also nest lists within a list to represent hierarchical relationships. Look at the following example to understand how it is done.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Lists</title>
</head>
<body>
    <h1>Important Cities of Different Countries</h1>

    <ul>
        <li>United States
            <ol>
                <li>New York</li>
                <li>Los Angeles</li>
                <li>Washington D.C.</li>
            </ol>
        </li>
        <li>United Kingdom 
            <ol>
                <li>London</li>
                <li>Manchester</li>
                <li>Birmingham</li>
            </ol>
        </li>
        <li>Australia
            <ol>
                <li>Sydney</li>
                <li>Melbourne</li>
                <li>Perth</li>
            </ol>
        </li>
    </ul>
</body>
</html>

This is what a nested list looks like.

As you can see from the image, we can nest ordered lists in unordered lists and vice versa.

In the next chapter, we will throw some light on HTML5 Forms.