Foundation HTML5 with CSS3

Constructing Content

Listing 4-24. A description list featuring two terms

<dl>

<dt>Domino mask</dt>

<dd>

<p>A domino mask covers the area around and between the eyes,

offering maximum comfort, freedom, and visibility, but minimal

obscurity.</p>

<p>The name comes from the Latin <i lang="la">dominus</i>, meaning “lord”

or “master.”</p>

</dd>

<dt>Cowl</dt>

<dd>A head covering combining a hood and a collar or mantle.</dd>

<dd>A streamlined covering around an aircraft engine or personal jetpack.</dd>

</dl>

Most browsers will display dd elements slightly indented from their corresponding dt. When a dd contains

other structural markup (such as paragraphs), the default margins of that nested element will apply. As you

can see in Figure 4-11, the paragraphs in the first term’s description have default margins above and

below them, whereas the second term’s two descriptions have no top and bottom margins at all. You can

modify all of this, of course, with CSS.

Figure 4-15. The description list rendered with default browser styling

Required Attributes

The dd element doesn’t require any attributes.

Optional Attributes

There are no optional attributes for the dd element.

Phrasing Elements

We’ve covered most of the common elements you’ll use to organize your content into sections, and to

break it down further into readable portions. Headings, paragraphs, and lists are the basic building blocks