# Lists

## What We'll Be Building!

![](https://3764443643-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M1CV_PDi4uSEWhb3GlC%2F-MBVmfVse6ZWe6P5Ra21%2F-MBVmoqXKuYaa0wJ9aXL%2F6.JPG?alt=media\&token=cf312a26-e8f4-4db9-883e-2f0ac213f795)

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>`

{% code title="lists.html" %}

```markup
<!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>

```

{% endcode %}

## 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:

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