I hope you enjoyed working on our creating lists challenge.
Let's take a quick look at the finished files so
that we can compare your work with the finished version of the files.
So I've got the labinstructions.txt file opened again.
And I have opened up the finished files folder so
that we can kind of go through and see exactly how I organize the content.
And it may be a little different than you.
As I mentioned, a lot of these were going to be judgment calls.
So the first step was to examine the site navigation, and
then organize them into a list if you deemed it appropriate.
So, I went into the intro and this probably is going to shock none of you.
I used an unordered list there.
You're probably familiar with seeing the navigation because we've worked on it so
frequently throughout the site, but
hopefully you used an unordered list here as well.
So, why did an unordered list fit this so perfectly?
Well, these links are all grouped together, they all belong to the same part
of the navigation, but the sequence that the links are in doesn't really matter.
Now, that doesn't mean that visually it doesn't matter,
because you want them to be consistent on every single page.
However, they don't need to be read or encountered in any one specific order.
So because of that, an unordered list really fits the bill for what we needed.
Now the second step was to go back and
examine the HTML timeline found in the intro file as well.
So I'm going to navigate back to the intro page and
scroll down till I find my timeline.
And here, I organized the timeline in an ordered list.
Now the reason I did that is because there's a specific order to the timeline.
We start off in 1991, and the timeline goes all the way down to 2012,
so each one of these steps is sequential in the way that the list is presented.
So, in my opinion,
an ordered list here fit a little bit better than an unordered list.
Next up,
we were going to look at the grouping of doctypes on the syntax.htm page.
There we had an h4 followed by a preformatted tag for
each example of the doctype declarations.
So I'm going to switch over on the syntax.htm and
jump down to the section, and you can see that I left this alone.
Now you may have made the judgement call that these needed to be organized in
a list, and if you did that you probably chose a description list because the h4
could be a term and the preformatted could fit within a description.
I certainly couldn't argue with that.
That's not a bad way to group this together because we
have these three items which are related to each other semantically.
They do sort of belong together.
So putting it in the definition list does work.
In the end though, they are already within a section.
They're in a section headed by the h3 and
in the h4 is themselves create new sections in our outline.
So if somebody is wanting to navigate to these individually,
it's pretty easy to do with just a document outline that we have right now.
So I didn't see the need to further enhance the semantics by a description
list, although it certainly would not have hurt the file.
So if you chose to do it, it wasn't necessarily the wrong decision.
Our final step was to go back into the reference.htm,
take a look at the HTML term, sort of the glossary that we had there, and
determine if they would benefit from any additional structure.
So I'm going to switch over to my reference file and
jump down to the section that contains the html terms, and indeed,
there, I decided that a description list probably was the best way to format that.
If you think about the way that this glossary is working, you have a term, and
then you have a description below that, that's a textbook case for
a description list.
Fits really well and because there's so
many terms, it gave you a lot of practice in creating that so,
examine your code, compare it to mine, and see if you get the same thing.
Now if you used a different type of list here,
that probably wasn't the best choice.
I don't really see an ordered list or an unordered list fitting here.
The only other choice you might have made is just to leave them the way they were or
section them through the use of more headers but frankly,
I think a list probably fits the best here semantically.
All right, so there's our challenge, all completed.
Now lists are very powerful elements for grouping content together in meaningful
ways and that's the important part of it that they offer meaningful organization.
As you learn HTML, pay attention to how other sites and
authors use lists, and what type of content they group with them.
You're going to be using them frequently in your own site so
it's very important that you understand exactly how they work