<dl> element is a description list that displays terms and details, commonly for metadata purposes.
<dl><!-- <dt> terms here --><!-- <dd> details here --></dl>
<dl> element, one or more
<dd> elements can be used.
Note: For Apple VoiceOver, the
<dl> tag will be recognized and announced as a “list” on macOS devices whereas it will not be recognized on iOS devices.
<dl> tag also supports nesting
<dd> pairs inside a
<div> tag when working with content microdata, global attributes, or general CSS styling.
In the example below, this technique is used inside the
<dl> tag. Additionally, some default styling is in place to highlight the list itself:
<!DOCTYPE html><html><head><!-- Styles are omitted in this example. --></head><body><dl><div><dt id="term-a" class="term">Aardvark</dt><dd class="detail">A large burrowing African mammal that feeds on ants and termites withits long sticky tongue.</dd></div><div><dt id="term-b" class="term">Aback</dt><dd class="detail">By surprise; suddenly, unaware(s).</dd></div></dl></body></html>
The rendered output is shown below:
Interested in helping build Docs? Read the Contribution Guide or share your thoughts in this feedback form.
Learn HTML on Codecademy
Front-End EngineerFront-end engineers work closely with designers to make websites beautiful, functional, and fast.
Includes 34 Courses
With Professional Certification