Lists are incredibly useful ways of organizing content.
HTML gives us there different types of lists to use based on
how our content needs to be organized and grouped together.
In our first exercise in this chapter,
we're going to create what's known as a unordered list.
So to work on this,
I've opened up the unordered.htm file found in the 06_01 directory.
And as you can see,
we have just some elements on the page that don't have any formatting at all.
And this is what we're going to create an unordered list around.
Now, if you've been paying attention in the previous chapters,
there've been files that we've had lists inside of them.
We just really haven't gone over the syntax yet.
So more than likely you've seen them and
gotten a little familiar with them even before we start this exercise.
Well anytime that you want a list,
the first thing that you're going to do is your going to need a parent list tag.
And that parent tag is going to describe what type of
list it is that's going to follow.
So since we're going to do an unordered list, we need to have a ul or
unordered list tag.
So I'm going to open up a ul tag and
then below all my items down there I'm going to close my ul tag.
So that tells the browser that we are going to create an unordered list.
Now, one of the things that I want you really to focus on
about what lists are and
what they do for us is that lists are primarily a way of grouping information.
So one of the things that I always tell people when they say well how do
I know when a list is appropriate?
Because you can use them for a lot of different things.
It's not just displaying a list of items in your text.
Basically I'm saying well, are they grouped and are they grouped in
a way that makes sense for each of them as individual items within the same group?
Meaning, do they belong to that sort of same hierarchy.
If so then a list actually is a compelling way to organize them.
You may have noticed in our HTML reference site for
example that the navigation is a series of list items.
And that's because a list is a perfect way of organizing links.
Each link is its own individual item, but
it belongs as part of the navigation whole.
So with that in mind, we're going to create these individual list items.
So list syntax has two basic parts.
One is the outside parent list tag.
The second part are the individual items within the list.
For unordered lists, the list item is indicated through the use of the li tags.
So item one.
I'm going to surround it with a list item tag.
And list item tags have both opening and closing tags.
And then I'm just going to go ahead and
surround each of these items with closing list item tags.
This is going to take a little while.
I'm just glad I didn't do a 19 item list.
Now you may notice that each of these list items is numbered in sequence.
One, two, and three.
And then after three, we have what looks to be sub items.
We have 3.1, 3.1, we have 3.2, and 3.3.
And that is exactly what they represent.
We want to do a nested list after three that's going to
hold those three items as a sub-grouping, or sub-list if you will.
And then, reestablish our list with item four.
Now, the way that that's done in HTML confuses a lot of people.
And that's basically because what we have to do now,
is we have to nest one list inside of another one.
And that gets a little confusing for folks.
So, here's the best way to think about this,
I'm going to do this sort of visually.
If I highlight these sort of sublist items and
just tab them over a little bit, we can now see that they belong to item three.
That's something that you're probably used to seeing visually anytime that you
have a list and anytime you have nested items inside that list.
So essentially all of these items,
these three list items, belong to this list item.
And that means that what I'm going to do is inside this list item,
I'm going to nest another list.
So, very carefully, I'm going to take this closing list item tag, and
I'm going to cut it.
Then what I'm going to do is below the nested list item, I'm going to paste it.
So now you can see all of these items are nested inside of this list.
Now, these nested items are actually considered to be in their own list.
So they're sort of a sub-list or nested list inside of the first one.
So in addition to the li tags that they have,
I need to also surround them in an unordered list.
So I need both an opening and a closing unordered list tag.
Now the reason that I'm going pretty slow here is that I really want you to
get the syntax behind what's going on.
And I think what I'm going to do is I'm going to further nest this visually so
you can see.
All right so essentially what we have is we have item one, we have item two,
item three, and item four.
Those are the four main items in our list, but
item three has a sub-list which has three items itself, 3.1, 3.2 and 3.3.
In order to do this,
what we're doing is we're nesting an entire list inside this list item.
And a lot of people aren't going to format it this carefully.
They may actually have this closing list item right
after the closing unorder list item.
How you format it's up to you.
I just wanted to be very, very clear with how that's formatted.
So be sure to take some time to practice the syntax for list so that
you understand exactly how those lists are structured and how nested lists work.
In the instance of this one where we only have one nested list, it's not that bad,
but when you start nesting multiple lists, it can get a little confusing.
Now you're going to use lists far more often than you might think at
first glance.
They're great for
organizing things like menus, form elements, product information, really any
content that needs to be grouped together in a related manner fits within a list.
Their flexibility and
utility make them among the most commonly used HTML elements.