search

Lists

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>

hashtag
File Location

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

     DotNetProjects
        └── HTMLCSSPreWork
            └── 1-HTML-Basics

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

            └── 2-CSS-Basics

hashtag
Set Up

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

hashtag
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.

hashtag
Ordered Lists

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

hashtag
Unordered List

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

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

hashtag
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 & P TagsNextLinks

Last updated