<< .. Go to : : Home : : Exercise 2 : : Demo 2A : : Demo 2B : : Demo 2C : : Demo 2D : : Demo 2E : : TAGS : : All Class Demos .. >>

Exercise 2 Demo: Part C : Definition Lists

This is the HTML you will need for Part C of Exercise 2.

Definition List Tags

Lets move on to the Definition List. It requires a pair of tags <dl> and </dl>. The Definistion List was originally created for lists featuring vocabulary words and their definitions, hence its name.

First open a Definition List <dl>
Then enclose a Definition Term inside the <dt> </dt> tags.
Open a Definition Description <dd>, put the definition of the term, and close the Definition Description tag </dd>
You can have as many terms and definitions as you want.
When you are done, close the Definition List </dl>

Your HTML will look like this:

Types of Chocolate
<dl>
<dt>White Chocolate</dt>
<dd>Chocolate made with cocoa butter, sugar and milk. It has no cocoa solids and is therefore white.</dd>
<dt>Milk Chocolate</dt>
<dd>A sweet chocolate with 10-20% cocoa solids and 12% milk solids.</dd>
<dt>Dark Chocolate</dt>
<dd>Sweetened chocolate with a high content of cocoa solids and little milk.</dd>
<dt>Semi-Sweet Chocolate</dt>
<dd>Classic dark baking chocolate with 40-62% cocoa solids.</dd>
<dt>Bittersweet Chocolate</dt>
<dd>Good bittersweet chocolate contains 60-85% cocoa solids. Has a rich, intense, bitter chocolate flavor.</dd>
</dl>

On your web page it would look like this:

Types of Chocolate

White Chocolate
Chocolate made with cocoa butter, sugar and milk. It has no cocoa solids and is therefore white.
Milk Chocolate
A sweet chocolate with 10-20% cocoa solids and 12% milk solids.
Dark Chocolate
Sweetened chocolate with a high content of cocoa solids and little milk.
Semi-Sweet Chocolate
Classic dark baking chocolate with 40-62% cocoa solids.
Bittersweet Chocolate
Good bittersweet chocolate contains 60-85% cocoa solids. Has a rich, intense, bitter chocolate flavor.
You can also use Definition Lists to simply indent copy:
This is some indented copy which is set off from the rest of my content. Can you figure out how I did it? (Hint: View Source)

Now it is your turn to create some practical or imaginative lists. Be sure to try nesting lists within lists and combining various types of lists.

Ready to learn a little bit about CSS? Go to Part D of Demo 2.

Want a review of Ordered Lists? Go to Part B of Demo 2.

Or a review of Unordered Lists? Go to Part A of Demo 2.

Go back to the Exercise 2 page.

© Claudia Faulk. Created in 2008. Updated 1.10