HTML dl: Main Tips
<dl>element represented an HTML definition list in HTML4.
- In HTML5, it was repurposed and renamed as the description list. This also made it more of a semantic element.
- Such lists work well for glossaries, metadata, FAQs, and similar type of lists.
- The HTML dl element supports all global attributes.
What is dl?
dl mean? Since HTML5, it stands for a description list. Such a list contains name-value pairs: terms and their definitions, questions and answers, etc. In these pairs, the <dt> elements represent the names, and the <dd> elements stand for the values.
<dl> <dt>Car</dt> <dd>A vehicle used for boring transportation.</dd> <dt>Hot air balloon</dt> <dd>A vehicle used for fun transportation.</dd> </dl>
Tip: you can wrap your HTML dl elements in <div> tags for styling purposes or to apply global attributes.
Theory is great, but we recommend digging deeper!
Name-Value Pairs for HTML dl
Before HTML5, the name of the dl element was deciphered as an HTML definition list. The update to a description list made the element's purpose clearer and also broader: the pair does not necessarily have to include any explanation, as long as there is a name-value pair in sight.
The rules for name-value pairs are flexible: there doesn't have to just be one of each. Check the example below to get the idea:
<h3>One name, one value:</h3> <dl> <dt>BitDegree</dt> <dd>Gamified online education platform</dd> </dl> <h3>One name, multiple values:</h3> <dl> <dt>BitDegree Learn</dt> <dd>Code theory</dd> <dd>Code examples</dd> <dd>Code editor</dd> </dl> <h3>Multiple names, one value:</h3> <dl> <dt>BitDegree Learn</dt> <dt>BitDegree Courses</dt> <dt>BitDegree Gamified Experience</dt> <dd>Tools needed to become a great developer</dd> </dl>
Warning: do not use HTML dl for dialogues! While this use was suggested in HTML4, it is now deprecated, as you are not describing the speaker in any way.