[?Jazzy music?]

In the previous video, we learned about

Ordered and Unordered lists.

Now, let's take a look at Definition lists.

The Definition list--or DL element--

represents a list of definitions

or descriptions for various items.

Let's start out with this tag--

the <dl> tag.

So we'll go ahead and open and close that.

And similar to the UL and OL elements,

this needs other tags inside of it,

and you don't actually want to just use it by itself.

This is different in that you need 2 types of tags,

instead of just the single <li> tag.

First, is the DT or Definition Title element.

You can think of Definition titles as

the main parts of your list--or the higher-level categories.

Definition titles should always be inside of <dl> tags.

So let's go ahead and add some <dt> tags.

First we'll say, "Video Pros"--

and then we'll go ahead and add in our "Teachers."

So if we switch back to the browser and refresh the page,

you can see that we now have a list, which is our "Video Pros" and "Teachers."

And these are just categories.

Now, this looks like an Ordered or an Unordered list--

but without the numbers or bullet points.

Next, we need to add in a DD element--or a description or definition element.

These should always be inside <dl> tags,

and they should always come after a <dt> tag.

So let's go ahead and add those in.

After our first <dt> tag, we'll go ahead and say our first Video Pro is "Jon"--

and then we'll add another <dd> tag with our other Video Pro, "Michael."

And then, after "Teachers,"we'll add in our video teachers--

which is myself, "Nick"--

and then we'll add in "Jim"--

and then finally, we'll add in "Amit"--there we go.

Now, Definition lists can look confusing

because there's not as much indentation as you might expect.

These DD elements are related to the DT elements,

but they're not actually nested inside of the tags,

so we don't need to use any indentation.

Indentation is only used when an element is actually nested inside of another element.

So let's go ahead and save that;

and we'll switch back to our browser and refresh the page.

And as you can see, this now looks like a nested list--

again, without the bullet points.

We have our high-level Definition titles of Video Pros and Teachers,

and then we have our lower-level definitions--or descriptions--

of our Video Pros and Teachers.

So let's get into some more semantics.

You can also create a description, with multiple titles.

In other words, the description or definition is defining 2 separate things, at the same time.

So let's try an example that's actually taken from the real HTML5 specification.

We'll switch back, and we'll create

a new Definition list, by using our <dl> tags.

And we'll scroll down here and make a little bit of room to work.

And inside of our new Definition list, we'll add our first Definition title--

which we'll call "color"--

and then we'll add in our second Definition title,

which will be the Great Britain version of the word "colour."

Now, because these are 2 separate types of the same thing,

let's add in a language attribute to describe this a little bit better.

The first one is "English in the U.S." and the second one is "English in Great Britain."

Then we'll go ahead and add the definition or description--

and for color, we'll say this is

"A sensation which (in humans) derives from the ability to detect light."

That's not really a full definition of color, but we'll keep it simple.

We'll switch back to the browser and refresh the page;

and as you can see, we now have these 2 high-level titles,

and then we have our lower-level definition or description.

You'll notice that both of the titles are not indented,

but you'll notice the actual description is indented.

[?Jazzy music?]

That about wraps things up for Definition lists.

These types of lists are less common than

Ordered and Unordered lists,

but if the content fits the pattern

of a Definition list, you should definitely consider using them.

[THINK VITAMIN MEMBERSHIP] [EST'D 2010] [membership.thinkvitamin.com]