HTML 5 dl Element
Mastering HTML5 - Part 4
Forward: In this part of the series we look at what is called the dl element in HTML5.
By: Chrysanthus Date Published: 22 Jul 2012
Introduction
Note: If you cannot see the code or if you think anything is missing (broken link, image absent. Etc.), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.
Illustration
Read and try the following code:
<!DOCTYPE HTML>
<html>
<head>
<title>dl illustration</title>
</head>
<body>
<dl>
<dt>
House
</dt>
<dd>
A building with rooms
</dd>
<dt>
Car
</dt>
<dd>
A moving object with seats and four wheels
</dd>
<dt>
Road
</dt>
<dd>
A stretch on the ground that allows people and cars to move over.
</dd>
</dl>
</body>
</html>
Use of a dl Element
A dl element can be used for a glossary consisting of terms and definitions. The dl tags enclose the dt and dd tags. The dt tag pair has the term as content. The dd tag pair has the definition as content. The above code illustrates this. The dl element can also be used for question and answers (Frequently Asked Questions - FAQ). It can be used for any list made up of name/value data. In this context, name is a term and value is a definition. Name/value data is the technical way to describe the user information that is in the dl element.
Questions and Answers
The following code segment shows how you can use it for questions and answers:
<dl>
<dt>What is the name of the thing you are holding?</dt>
<dd>It is a book.</dd>
<dt>What king of book is it?</dt>
<dd>It is a text book</dd>
<dt>What is the content of the book?</dt>
<dd>The book talks about the Roman empire: the rise and fall of the Roman empire; democracy for some tine in the roman empire; the termination of democracy by Julius Caesar</dd>
</dl>
The dd element behaves like a paragraph element. However, you can have paragraph elements and other HTML elements in the dd element. The following code illustrates this:
<dl>
<dt>Term One</dt>
<dd>
<p>
This is a paragraph.
</p>
<p>
Another Paragraph
</p>
</dd>
<dt>Term Two</dt>
<dd>
<p>
This is a paragraph.
</p>
<p>
Another Paragraph
</p>
</dd>
</dl>
More than one dd Element for a dt Element
You can have more than one dd element corresponding to one dt element in a dl element. Consider the writing of a book for which there are two authors and one editor. The following dl element can be used to list these participants:
<dl>
<dt>Authors</dt>
<dd>John Smith</dd>
<dd>Luke Brown</dd>
<dt>Editor</dt>
<dd>James Bond</dd>
</dl>
dd Element for Instructions
You can use the dd element for instructions as in the following code:
<dl>
<dt>Step One</dt>
<dd>Do all of these things.</dd>
<dt>Step Two</dt>
<dd>Do all of those things.</dd>
<dt>Step Three</dt>
<dd>Go over all what you have done.</dd>
</dl>
That is it. Time to take a break. We continue in the next part of the series.
Chrys
Related Links
Major in Website DesignWeb Development Course
HTML Course
CSS Course
ECMAScript Course
NEXT