This course will be retired on January 6, 2020. We recommend "HTML Basics" for up-to-date content.
You've already started watching Definition Lists
Definition lists are useful when you have a group of terms that need descriptions. Definition lists tend to be less commonly used than ordered and unordered lists, but if the content fits the pattern of a definition list, you should definitely consider using them.
The phrase definition title is used in this video. However, this is more commonly known as definition term. For more information, see <dt> in the latest W3C draft.
-
0:00
[?Jazzy music?]
-
0:07
In the previous video, we learned about
-
0:09
Ordered and Unordered lists.
-
0:11
Now, let's take a look at Definition lists.
-
0:15
The Definition list--or DL element--
-
0:19
represents a list of definitions
-
0:22
or descriptions for various items.
-
0:25
Let's start out with this tag--
-
0:27
the <dl> tag.
-
0:29
So we'll go ahead and open and close that.
-
0:32
And similar to the UL and OL elements,
-
0:36
this needs other tags inside of it,
-
0:38
and you don't actually want to just use it by itself.
-
0:41
This is different in that you need 2 types of tags,
-
0:44
instead of just the single <li> tag.
-
0:48
First, is the DT or Definition Title element.
-
0:53
You can think of Definition titles as
-
0:55
the main parts of your list--or the higher-level categories.
-
0:59
Definition titles should always be inside of <dl> tags.
-
1:04
So let's go ahead and add some <dt> tags.
-
1:08
First we'll say, "Video Pros"--
-
1:12
and then we'll go ahead and add in our "Teachers."
-
1:18
So if we switch back to the browser and refresh the page,
-
1:22
you can see that we now have a list, which is our "Video Pros" and "Teachers."
-
1:27
And these are just categories.
-
1:29
Now, this looks like an Ordered or an Unordered list--
-
1:32
but without the numbers or bullet points.
-
1:35
Next, we need to add in a DD element--or a description or definition element.
-
1:41
These should always be inside <dl> tags,
-
1:44
and they should always come after a <dt> tag.
-
1:48
So let's go ahead and add those in.
-
1:51
After our first <dt> tag, we'll go ahead and say our first Video Pro is "Jon"--
-
1:58
and then we'll add another <dd> tag with our other Video Pro, "Michael."
-
2:04
And then, after "Teachers,"we'll add in our video teachers--
-
2:09
which is myself, "Nick"--
-
2:12
and then we'll add in "Jim"--
-
2:17
and then finally, we'll add in "Amit"--there we go.
-
2:22
Now, Definition lists can look confusing
-
2:25
because there's not as much indentation as you might expect.
-
2:29
These DD elements are related to the DT elements,
-
2:33
but they're not actually nested inside of the tags,
-
2:37
so we don't need to use any indentation.
-
2:40
Indentation is only used when an element is actually nested inside of another element.
-
2:46
So let's go ahead and save that;
-
2:48
and we'll switch back to our browser and refresh the page.
-
2:52
And as you can see, this now looks like a nested list--
-
2:56
again, without the bullet points.
-
2:58
We have our high-level Definition titles of Video Pros and Teachers,
-
3:02
and then we have our lower-level definitions--or descriptions--
-
3:08
of our Video Pros and Teachers.
-
3:11
So let's get into some more semantics.
-
3:13
You can also create a description, with multiple titles.
-
3:17
In other words, the description or definition is defining 2 separate things, at the same time.
-
3:25
So let's try an example that's actually taken from the real HTML5 specification.
-
3:31
We'll switch back, and we'll create
-
3:33
a new Definition list, by using our <dl> tags.
-
3:39
And we'll scroll down here and make a little bit of room to work.
-
3:45
And inside of our new Definition list, we'll add our first Definition title--
-
3:51
which we'll call "color"--
-
3:55
and then we'll add in our second Definition title,
-
3:59
which will be the Great Britain version of the word "colour."
-
4:05
Now, because these are 2 separate types of the same thing,
-
4:10
let's add in a language attribute to describe this a little bit better.
-
4:14
The first one is "English in the U.S." and the second one is "English in Great Britain."
-
4:25
Then we'll go ahead and add the definition or description--
-
4:32
and for color, we'll say this is
-
4:34
"A sensation which (in humans) derives from the ability to detect light."
-
4:48
That's not really a full definition of color, but we'll keep it simple.
-
4:53
We'll switch back to the browser and refresh the page;
-
4:57
and as you can see, we now have these 2 high-level titles,
-
5:01
and then we have our lower-level definition or description.
-
5:06
You'll notice that both of the titles are not indented,
-
5:09
but you'll notice the actual description is indented.
-
5:13
[?Jazzy music?]
-
5:15
That about wraps things up for Definition lists.
-
5:17
These types of lists are less common than
-
5:19
Ordered and Unordered lists,
-
5:22
but if the content fits the pattern
-
5:24
of a Definition list, you should definitely consider using them.
-
5:28
[THINK VITAMIN MEMBERSHIP] [EST'D 2010] [membership.thinkvitamin.com]
You need to sign up for Treehouse in order to download course files.
Sign up