<< .. 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

Definition Lists were originally created for lists featuring vocabulary words and their definitions, hence its name.

Definition List Tags

The Definition List requires a pair of tags <dl> and </dl>.

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.

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 6.18