Definition Lists
Definition lists are used to display information in a way that is similar to a dictionary or thesaurus. They consist of two parts: a term and a definition. The term is given by the <dt> element and is restricted to inline content. The definition is given with a <dd> element that contains block-level content.
Here is an example of a definition list:
<dl>
<dt>Definition List</dt>
<dd>A list of terms and their definitions.</dd>
<dt>Term</dt>
<dd>A word or phrase that is being defined.</dd>
<dt>Definition</dt>
<dd>A statement that provides an explanation or meaning of a term.</dd>
</dl>Task
Add a definition list dl with dt Bachelor’s Degree, dd Computer Science, dt Master’s Degree, dd Web Development after Education heading within the section element. Run the code to see the results and experiment with the code to get used to it.
Attributes
The <dl> element does not have any attributes. The <dt> element has an id attribute that can be used to identify the term. The <dd> element has an id and class attributes that can be used to identify the definition.
CSS
CSS can be used to style definition lists. For example, you could use CSS to change the font, size, and color of the terms and definitions.
Here is an example of CSS that can be used to style a definition list:
dl {
margin: 0 0 1em 0;
padding: 0;
}
dt {
font-weight: bold;
}
dd {
margin-bottom: 1em;
}This CSS will set the margin and padding of the definition list to 0, and it will set the font weight of the terms to bold. It will also set the margin-bottom of the definitions to 1em.
Examples
Here are some examples of definition lists:
- A definition list of computer terms.
- A definition list of medical terms.
- A definition list of legal terms.
- A definition list of historical terms.
- A definition list of technical terms.