Description lists, which were referred to prior to HTML5 as definition lists,
are lists that consists of two parts for each item.
That's a term and a description.
Because their syntax is so
flexible many authors don't really fully understand what description lists can do.
That's a shame because they really are one of the most flexible semantic elements in
all of HTML.
So to show off a little bit of what description lists can do,
I've opened up description.htm and the 06_03 folder.
Now just to kind of preview for you what's going on here,
we're going to have three description lists that we're going to do.
We're going to do a basic one, one with multiple terms, and
one with multiple definitions.
If I were to preview this right now in the browser,
doesn't look like much is going on there, and that's because inside each one of
these headings we just have some text that we need to group inside of these lists.
So.
Let's start with a basic description list so
you can sort of see the overall syntax of the description list and
then we'll move on to more of what we can do with them.
So below the h4, I'm going to open up a dl.
So much like an ordered list and an unordered list,
a dl lets the browser know that a description list is forthcoming.
The same way that we have an opening and closing tags for
our other lists we have a closing tag for the DL as well.
And I'm going to move that in a little bit so it formats a little nicer visually.
So now, as I mentioned, instead of a list item, like we have an ordered and
unordered list,
the individual items within a definition list are made up of multiple items.
We have a dt for term and we have a dd for description.
So this unordered list right here, I'm going to tab this in a little bit.
That is going to be a dt.
So the terms always come first.
And I'm going to surround that with a dt.
And then the next sentence, grouping of list items in no specific order,
I'm going to say dd.
So you can kind of see the semantics in play here.
Unorderded list is the term.
The description is grouping of list items in no specific order.
So we're going to do that for each one of these.
And I think the easiest thing for me to do is go ahead and
tab these over now so that when I add the tags everything formats nicely.
Now remember, each of these dt's and dd's have opening and closing tags.
And the order in which you do them matters dramatically.
So, in this case of a basic list, where we have one term and
one definition, they need to follow each other in sequence.
So now, semantically, this actually makes a whole lot more sense.
It's just easier for us to read, even within the code.
Each one of these list types is described using a term and
then we have a brief description of them.
And we're using the dt and the dd tags to do that.
Now if I save this and
go out to the browser, you can see how this is typically rendered by a browser.
Most browsers will render the terms as top level items, and
do the descriptions as inset.
So they'll give them a little bit of an inset,
little bit of a margin on the left hand side, and display them that way.
But through CSS,
you can make them display any way that you want, so they're very, very flexible.
Okay, so that's a basic description list.
A basic description list is going to have multiple items.
It's going to have a term followed by a definition and one term for
one definition.
Now they don't have to be that way.
You can do them any way that you'd like.
For example, you could have a definition or
description that has multiple terms applied to it.
Let's go down to the next grouping and we'll go ahead and
open up another definition list.
And again I have the opening definition list tag.
And I've got the closing definition list tag.
And so what I'm going to do,
I'm going to take all these guys, tab 'em in a little bit.
I'm going to do three dt's around each of these.
So you can see that this is the term DL description definition list
that people might see when they're looking at definitions of this list type.
Remember, prior to HTML5 these were referred to as definition lists.
So a lot of documents out there still refer to them that way and
a matter of fact, throughout this example,
you probably heard to me refer to them as definition lists a few times.
I just can't seem to get it out of my head.
All right.
Now, the dd that I've got below this, I only have one,
even though there's two blocks of text down here.
Now the reason I did that is because I also wanted to show you
how flexible these are in terms of the content that you can have inside of them.
For the most part, you can put anything you want to in a term or a definition.
You can put tables.
You can put other lists.
In this case, I'm going to do paragraphs.
And I want each of these to be contained within their own paragraph, so
it's okay to put more complicated structures within one of these lists.
So now if I save this and go back out the browser, you can see that for this
particular list it says DL Description Definition list, it is a list that groups
come together by terms and descriptions used frequently by facts, glossaries, and
dictionaries and then HTML lists were frequently used to mark up dialog.
That practice is discouraged now, but no suitable semantic alternative has been
proposed, leading to its continued widespread use for dialog.
And that is definitely one of the things that definition lists are used for.
They're used for glossaries, frequently asked questions, dictionaries,
even to mark up dialog between multiple parties because they are so flexible.
Now the last definition list that we're going to do is one that allows us to
do multiple descriptions.
So, in the previous definition list, we had multiple terms.
In this one we're going to have multiple descriptions.
So again, I'm going to create an opening and a closing dl tag.
And here, we're marking up what is, for lack of a better term, metadata.
So for this course, HTML Central Training, we've got the course itself,
the author, yours truly.
We have producer, Dan Weston.
And then we have three technical reviewers, Simon Allardice, Garrick Chow,
and Josh Fitgatner.
So all of these three people belong to this one term.
And there's absolutely nothing wrong with marking up the list like this.
So we're going to do a dt for the Course, a dd for the course name.
We'll do a dt for the Author and then a dd for my name.
Producer will get terms.
And Dan, who is one of my favorite producers here at lynda.com,
will get the description.
Now it's perfectly normal for metadata to be marked up in this way and
the description lists are used quite frequently to mark up metadata, credits,
things like that.
Now in this case, for technical reviewers, we have three of them,
so I want to go ahead and make sure that they're all defined as descriptions.
So instead of wrapping them all in a single dd,
I'm going to wrap them all in individual dd's.
So you can have three descriptions attached to one term, and
that is perfectly acceptable and semantic.
You might have thought that we were going to group them all in
one big description, but in fact they are individual units and
they need to be represented as such.
Right.
So we have three technical reviewers.
These are my buddies Simon Allardice, Garrick Chow, who are also authors here at
lynda.com, and Josh Fitgatner who is one of the best live action directors we have.
He's a really talented individual.
So if I look at that within the browser and
scroll down, we can see how this is represented.
There's Course, Author, Producer, and Technical Reviewers.
Notice that they're all indented because they belong to that one term.
So that gives you a little taste of what you can do with description lists.
When you first start using them it may take you a little while before you're
totally comfortable with the syntax.
And that's understandable.
But once you understand how they work, you'll really appreciate the flexibility
that description lists give you, when you're grouping content.