HTML dl: Main Tips
- The
<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?
What does 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.
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.