Theory
Theory
Comments

The dl, dt and dd tags as well as description list

Here is a new blog entry about the “maladies” that coders are susceptible to. (Don’t worry! You won’t catch any of them if you are a diligent student in this course.) Each disease has a description, and some even have several such descriptions. The last list type (the description list) is the most suitable for marking up such information.

The description list is good for marking up questions and answers, terms and definitions, as well as categories and topics. It is created using three tags:

<dl> (short for “description list”) designates the description list itself;
<dt> (which is short for “description term”) designates the term;
<dd> (which is short for “description definition”) designates the description or definition.

The <dt> and <dd> tags are written within <dl>.

Each <dl> list can contain one or more terms and one or more descriptions for each term. Code example:

<dl>
  <dt>HTML</dt>
  <dd>Hypertext Markup Language</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
  <dd>A language for formatting the presentation of HTML documents</dd>
</dl>

By default, the browser adds a small indent to the left of the definitions.

You might see <dl> referred to as an “association list” (which the current HTML specification calls it), or as a “definition list” (as it was called in the previous version of HTML). They all mean the same thing.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>The website of a beginning coder</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <p>Blog</p> <nav> Return to home </nav> </header> <main> <article> <h1>Day Four. How I almost got sick</h1> <p>Today I found out that it can be dangerous to be a coder. When you are just starting out, you are still inexperienced and can easily get infected by some sort of disease. Here are just some of the dangers that may be lying in wait for you:</p>  Divatosis Acute fear of semantics Tablephobia Avoidance of tables A desire to format tables using divs Classitis The tendency to assign classes to every tag </article> <aside> Your ad could go here </aside> </main> <footer> Website footer </footer> </body> </html>

CSS

body { padding: 0 30px; font-size: 14px; line-height: 22px; font-family: "Georgia", serif; color: #222222; } h1 { font-size: 20px; line-height: normal; } nav { color: #888888; } aside { margin: 20px 0; color: #c4c4c4; }

Goalscompleted

After the first paragraph add the description list <dl> to <article> and enclose the entire unmarked up text in it.
Add the term <dt> with the text Divatosis and its description <dd> with the text Acute fear of semantics to the list.
Then add the term with the text Tablephobia and its two descriptions with the texts Avoidance of tables and A desire to format tables using divs.

You can use the tags <dt> and <dd> to mark up the remaining term and description <dl>.

The dl, dt and dd tags as well as description list

Comments

Log in

Sign up

Restore access