A description tag groups a term and detail together. Often it is used to organize descriptions in a list view.
Example
- Anheuser-Busch Hall
- Anheuser-Busch Hall, on which construction began in 1995, became the new home of the School of Law in January 1997. The building, with 175,000 square feet of space, is constructed of Missouri Red Granite in the campus’ traditional Collegiate Gothic style. Within the building are several classrooms, library facilities, student computer laboratories, study areas and faculty offices.
- Hillman Hall
- Hillman Hall is approximately 105,000 square feet, containing research, instruction, student, faculty, social and meeting spaces as well as a café and the Maxine Clark and Bob Fox Forum, a multiuse public space.
Design Considerations
Descriptions use the paragraph font style.
The description term is bolded to make the description list easily scannable.
The description detail is indented to separate it from the term and show that the content is related.
Best Practices
- Descriptions are used when a user needs to create a list of terms with details or definitions.
- Keep description terms short and concise.
- It is recommend to keep description details no longer than a paragraph in length, especially when in a list view.
HTML
<dl>
<dt>Lorem Ipsum</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut rutrum id lectus in pulvinar. Sed hendrerit aliquet neque consectetur dictum. Aliquam hendrerit odio vitae odio varius euismod. Quisque at iaculis lacus, at placerat odio. Nunc bibendum metus laoreet massa elementum convallis.</dd>
</dl>CSS
dt {
font-weight: bold;
}
dd {
margin: 0 1.5em 1.5em;
}