National 5 / Web Development / HTML - Lists

HTML - Lists

Learn to add bullet pointed and numbered lists to a webpage.

Lists

We can add two types of list to a webpage. A bullet pointed list and a numbered list.

In HTML these have specific names.

A bullet pointed list is referred to as an unordered list and a numbered list is refered to as an ordered list.

This is an unordered list:

Item 1
Item 2
Item 3

This is an ordered list:

Item 1
Item 2
Item 3

Unordered List

We use the ul tag to create an unordered list

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>AlbaCode</title>
    </head>
    <body>
        <ul>

        </ul>
    </body>
</html>

We can add list items in between the opening and closing ul tags. We use the li tag to do this.

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>AlbaCode</title>
    </head>
    <body>
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </body>
</html>

Each list item will produce a bulletpoint.

Ordered List

We use the ol tag to create an ordered list

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>AlbaCode</title>
    </head>
    <body>
        <ol>

        </ol>
    </body>
</html>

We can add list items in between the opening and closing ol tags. As shown previously, we use the li tag to do this.

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>AlbaCode</title>
    </head>
    <body>
        <ol>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ol>
    </body>
</html>