They are used to represent a list of descriptions. With <dl> (description list) we group the elements in a list, with <dt> (description term) we specify each term that we want to define and with <dd> (description details) we provide a description or definition for the <dt> corresponding.
It is often used for glossaries or to display data in the form of key-value pairs.
The possible combinations are:
- A term + a definition (a
<dt>followed by a<dd>) - Multiple terms + one definition (multiple
<dt>followed by a<dd>) - One term + multiple definitions (one
<dt>followed by multiple<dd>) - Multiple terms + multiple definitions (multiple
<dt>followed by multiple<dd>in key-value format)
<dt>/<dd> pairs can be grouped within a <div> to use microdata, give global attributes to a group, or simply to assign styles.
These tags should not be used simply to create indentation in the content (the <dd> usually brings it by default), to achieve that effect you must use CSS.
<dl> has no implicit ARIA role, <dt> has term, and <dd> has definition.
Due to the different behavior that assistive technologies have when advertising this type of content, it is very important to ensure that the content of each item on the list is written in a way that communicates its relationship with the other items on the list in the group.
- Type: block / block / block
- Self-closing: No / No / No
- Semantic value: No / No / No
Definition and example <dt> - Definition and example <dt> - Definition and example <dd> | Support
Top comments (0)