HTML
Intermediate
30 mins
Teacher/Student led
250 points
What you need:
Chromebook/Laptop/PC or iPad/Tablet

HTML Lists

In this step-by-step lesson, you'll learn about HTML lists. Starting with an introduction to ordered and unordered lists, you'll explore how to code these lists and alter their appearance. You'll also delve into nested lists and have the opportunity to code your own list. Practical examples and interactive coding exercises are included to enhance your learning experience.
Learning Goals Learning Outcomes Teacher Notes

Live Class Feed

This is a live feed of the latest activity by your students on this lesson. It will update in real-time as they work on the lesson.
Load previous activity

    1 - Introduction

    HTML lists are used to display a group of related items in a list. There are two types of HTML lists:

    Ordered Lists (that put a number before each item in the list)

    1. First item
    2. Second item
    3. Third item
    4. Fourth item
    5. And so on

    Unordered Lists (that put a bullet point before each item in the list)

    • First item
    • Second item
    • Third item
    • Fourth item
    • And so on

    2 - Ordered Lists

    Ordered lists display a number (or even letters like a, b, c etc.) in front of each item in the list.

    To code ordered lists in HTML we use the <ol></ol> (ordered list) tag. This tells the web browser that we want to display an ordered list and then we put a <li></li> (list item) tag inside the <ol></ol> tag for each item that we want to display.

    Whatever content we want to display for the list item we put inside the <li></li> tag.

    The following HTML code creates an ordered list for the top 5 largest lakes in the world.

     

    3 - Different types of ordered lists

    By default ordered lists will display numbers for the items but we can include a type attribute inside the <ol> tag that we can use to specify what type of numbering to use for the list.

    We can specify the following numbering type for ordered lists:

    • for lowercase letters.
    • A for uppercase letters.
    • i for lowercase Roman numerals.
    • I for lowercase Roman numerals.
    • 1 for numbers (default).

    Try changing the type of the following ordered list and then click 'Run Code' to see how it affects the numbering.

    4 - Unordered Lists

    Unordered lists display a bullet point in front of each item in the list.

    To code unordered lists in HTML we use the <ul></ul> (unordered list) tag. This tells the web browser that we want to display an unordered list and then we put a <li></li> (list item) tag inside the <ul></ul> tag for each item that we want to display.

    Whatever content we want to display for the list item we put inside the <li></li> tag.

    The following HTML code creates an unordered list for the top 5 fastest production cars in the world (by acceleration).

    5 - Different types of unordered lists

    By default unordered lists will display a disc bullet point for the items but we can include a type attribute inside the <ul> tag that we can use to specify what type of bullet point to use for the list.

    We can specify the following bullet points type for unordered lists:

    • circle for circle bullet points.
    • disc for disc bullet points (default).
    • square for square bullet points.

    Try changing the type of the following unordered list and then click 'Run Code' to see how it affects the bullet points.

    Unlock the Full Learning Experience

    Get ready to embark on an incredible learning journey! Get access to this lesson and hundreds more in our Digital Skills Curriculum.

    Copyright Notice
    This lesson is copyright of Coding Ireland. Unauthorised use, copying or distribution is not allowed.
    🍪 Our website uses cookies to make your browsing experience better. By using our website you agree to our use of cookies. Learn more