list

In this module we will do the following:

  1. Explain the two types of lists and why we would want different ones.

  2. Create an unordered list <ul></ul>

  3. Create an ordered list <ol></ol>

File Location

For this module, you should be working in the following location:

    javascript-library
        └── 0-JavaScript-PreWork
            └── 1-HTML-Basics

                03-lists.html <---You should be here.

            └── 2-CSS-Basics
            └── 3-JavaScript-Basics

Set Up

We'll be adding the code to the 03-lists file.

List tags

There are only a few tags you'll need to be comfortable with when creating lists.

The two different tags that describe the type of list you're creating: ul: Unordered list, will create a bulleted list by default. ol: Ordered list, will create a numerical list by default.

And the tag that indicates that you're creating an item that belongs to a list (a list item): li - Used in both types of lists.

Ordered Lists

Go ahead and create an ordered list. Please add the following to the ordered list to the file:

 <!DOCTYPE html>
<html>
<head>
    <title>List tags</title>
</head>
<body>
    <h3>Lasagna Recipe</h3>
    <ol>
        <li><strike>Boil noodles</strike></li>
        <li>Make sauce</li>
        <li>Lay out noodles</li>
        <li>Add cheese</li>
        <li>Pour sauce</li>
        <li>Bake in oven</li>
    </ol>
</body>
</html>

Unordered List

And here is an example of an unordered list. You can simply write this beneath the closing (</ol>) tag of the list from the above example.

    <h3>Weekend To Do List</h3>
    <ul>
        <li>Clean garage</li>
        <li>Fix car</li>
        <li>Create million dollar </li>
        <li>Make lasagna</li>
        <li>Code an award winning app</li>
    </ul>

Don't forget to alt + b after adding your code and saving your file to view the result of your work.

List Uses

Lists are all over the place in Web Development, whether it's a nav bar for site navigation, a list of photos, a list of contacts, etc. You'll see lists all over the place. When we get to CSS, we'll see how we can style our lists in different ways.

Let's move on to Links.

Previoush & pNextlink

Last updated