Lists

What We'll Be Building!

There are times when we need to list things out. Luckily for us, HTML has a special set of tags made for that task specifically. These are called 'list' tags (much wow, creative name!).

There are two type of list tags:

  1. Ordered Lists

    1. List Item 1

    2. List Item 2

  • Unordered Lists

    • List Item 1

    • List Item 2

As you can see above and ordered list will automatically number the items in the list, while an unordered list just lays them out using bullet points. I numbered and indented those two lists manually but a list tag will save you a lot of time and effort, if used properly.

List Tags

For an ordered list the tag looks like this: <ol>

For an unordered list the tag looks like this: <ul>

To add lines to your list you can't just drop a list tag and put content in it. Inside of each list are multiple list element tags. These tags hold the content you want to show in your list and look like this: <li>

lists.html
<!DOCTYPE html>
<html>
    <body>
        <ol>
            <li>List Item #1</li>
            <li>List Item #2</li>
            <li>List Item #3</li>
            <li>List Item #4</li>
        </ol>
        
        <ul>
            <li>List Item #1</li>
            <li>List Item #2</li>
            <li>List Item #3</li>
            <li>List Item #4</li>
        </ul>
        
    </body>
</html>

Exercises

Create a new html tag named lists.html. With this document and using the code above as a guide:

  1. Create one ordered list and one unordered list.

  2. Try adding other elements to each of your list items. For example you can try adding an image tag and/or paragraph tag you created earlier to the list items like this:

    <ol>
    <li>
        <p>Picture of Girl</p>
        <img src="img_girl.jpg" alt="Girl-in-a-jacket" width="500" height="600">
    </li>
</ol>
PreviousAdding ImagesNextLinking Pages

Last updated

Was this helpful?