Diff of The dl element

The section is located at: The elements of HTML → Grouping content → The dl element

Differences between HTML Standard and W3C HTML

Note: This site reformats HTMLs to reduce unnecessary diffs. The following HTMLs are not equal to the specifications. More info.

All of diffs are generated automatically from WHATWG HTML Standard and W3C HTML retrieved at . More info.

WHATWG HTML StandardW3C HTML
The dl elementThe dl element
<h4>4.4.9 The dl element</h4><h4>4.4.9. The dl element</h4>
<dl class="element"><dl class="element">
<dt> <dt>
Categories: Categories:
</dt> </dt>
<dd> <dd>
Flow content. Flow content.
</dd> </dd>
<dd> <dd>
If the element's children include at least one name-value group: Palpable content. If the elements children include at least one name-value group: Palpable content.
</dd> </dd>
<dt> <dt>
Contexts in which this element can be used: Contexts in which this element can be used:
</dt> </dt>
<dd> <dd>
Where flow content is expected. Where flow content is expected.
</dd> </dd>
<dt> <dt>
Content model: Content model:
</dt> </dt>
<dd> <dd>
Either: Zero or more groups each consisting of one or more dt elements followed by one or more dd elements, optionally intermixed with script-supporting elements. Either:Zero or more groups each consisting of one or more dt elements followed by one or more dd elements, optionally intermixed with script-supporting elements.
</dd> </dd>
<dd> <dd>
Or: One or more div elements, optionally intermixed with script-supporting elements. Or: One or more div elements, optionally intermixed with script-supporting elements.
</dd> </dd>
<dt> <dt>
Tag omission in text/html: Tag omission in text/html:
</dt> </dt>
<dd> <dd>
Neither tag is omissible. Neither tag is omissible
</dd> </dd>
<dt> <dt>
Content attributes: Content attributes:
</dt> </dt>
<dd> <dd>
Global attributes Global attributes
</dd> </dd>
<dt>
Allowed ARIA role attribute values:
</dt>
<dd>
list role (default - do not set), group or presentation.
</dd>
<dt>
Allowed ARIA state and property attributes:
</dt>
<dd>
Global aria-* attributes
</dd>
<dd>
Any aria-* attributes applicable to the default or allowed roles.
</dd>
<dt><dt>
DOM interface: DOM interface:
</dt> </dt>
<dd> <dd>
<pre class="idl">[HTMLConstructor] <pre class="idl def">interface HTMLDListElement : HTMLElement {};</pre>
interface HTMLDListElement : HTMLElement {
// also has obsolete members
};</pre>
</dd> </dd>
</dl></dl>
<p>The dl element represents an association list consisting of zero or more name-value groups (a description list). A name-value group consists of one or more names (dt elements, possibly as children of a div element child) followed by one or more values (dd elements, possibly as children of a div element child), ignoring any nodes other than dt and dd element children, and dt and dd elements that are children of div element children. Within a single dl element, there should not be more than one dt element for each name.</p><p>The dl element represents a description list of zero or more term-description groups. Each term-description group consists of one or more terms (represented by dt elements) possibly as children of a div element child), and one or more descriptions (represented by dd elements possibly as children of a div element child), ignoring any nodes other than dt and dd element children, and dt and dd elements that are children of div element children within a single dl element.</p>
<p>Name-value groups may be terms and definitions, metadata topics and values, questions and answers, or any other groups of name-value data.</p><p>Term-description groups may be names and definitions, questions and answers, categories and topics, or any other groups of term-description pairs.</p>
<p>The values within a group are alternatives; multiple paragraphs forming part of the same value must all be given within the same dd element.</p>
<p>The order of the list of groups, and of the names and values within each group, may be significant.</p>
<p>In order to annotate groups with microdata attributes, or other global attributes that apply to whole groups, or just for styling purposes, each group in a dl element can be wrapped in a div element. This does not change the semantics of the dl element.</p>
<p>The name-value groups of a dl element dl are determined using the following algorithm. A name-value group has a name (a list of dt elements, initially empty) and a value (a list of dd elements, initially empty).</p>
<ol>
<li>
<p>Let groups be an empty list of name-value groups.</p>
</li>
<li>
<p>Let current be a new name-value group.</p>
</li>
<li>
<p>Let seenDd be false.</p>
</li>
<li>
<p>Let child be dl's first child.</p>
</li>
<li>
<p>Let grandchild be null.</p>
</li>
<li>
<p>While child is not null:</p>
<ol>
<li>
<p>If child is a div element, then:</p>
<ol>
<li>
<p>Let grandchild be child's first child.</p>
</li>
<li>
<p>While grandchild is not null:</p>
<ol>
<li>
<p>Process dt or dd for grandchild.</p>
</li>
<li>
<p>Set grandchild to grandchild's next sibling.</p>
</li>
</ol>
</li>
</ol>
</li>
<li>
<p>Otherwise, process dt or dd for child.</p>
</li>
<li>
<p>Set child to child's next sibling.</p>
</li>
</ol>
</li>
<li>
<p>If current is not empty, then append current to groups.</p>
</li>
<li>
<p>Return groups.</p>
</li>
</ol>
<p>To process dt or dd for a node node means to follow these steps:</p>
<ol>
<li>
<p>Let groups, current, and seenDd be the same variables as those of the same name in the algorithm that invoked these steps.</p>
</li>
<li>
<p>If node is a dt element, then:</p>
<ol>
<li>
<p>If seenDd is true, then append current to groups, set current to a new name-value group, and set seenDd to false.</p>
</li>
<li>
<p>Append node to current's name.</p>
</li>
</ol>
</li>
<li>
<p>Otherwise, if node is a dd element, then append node to current's value and set seenDd to true.</p>
</li>
</ol>
<p class="note">When a name-value group has an empty list as name or value, it is often due to accidentally using dd elements in the place of dt elements and vice versa. Conformance checkers can spot such mistakes and might be able to advise authors how to correctly use the markup.</p>
<div class="example"><div class="example">
<p>In the following example, one entry ("Authors") is linked to two values ("John" and "Luke").</p> <p>In this example a dl is used to represent a simple list of names and descriptions:</p>
<pre>&lt;dl&gt; <pre>&lt;dl&gt;
&lt;dt&gt; Authors &lt;dt&gt;Blanco tequila&lt;/dt&gt;
&lt;dd&gt; John &lt;dd&gt;The purest form of the blue agave spirit...&lt;/dd&gt;
&lt;dd&gt; Luke &lt;dt&gt;Reposado tequila&lt;/dt&gt;
&lt;dt&gt; Editor &lt;dd&gt;Typically aged in wooden barrels for between two and eleven months...&lt;/dd&gt;
&lt;dd&gt; Frank
&lt;/dl&gt;</pre>&lt;/dl&gt;</pre>
</div></div>
<div class="example"><p>Each term within a term-description group must be represented by a single dt element. The descriptions within a term-description group are alternatives. Each description must be represented by a single dd element.</p>
<p>In the following example, one definition is linked to two terms.</p>
<pre>&lt;dl&gt;
&lt;dt lang="en-US"&gt; &lt;dfn&gt;color&lt;/dfn&gt; &lt;/dt&gt;
<span lang="en-GB">&lt;dt lang="en-GB"&gt; &lt;dfn&gt;colour&lt;/dfn&gt; &lt;/dt&gt;</span>
&lt;dd&gt; A sensation which (in humans) derives from the ability of
the fine structure of the eye to distinguish three differently
filtered analyses of a view. &lt;/dd&gt;
&lt;/dl&gt;</pre>
</div>
<div class="example"><div class="example">
<p>The following example illustrates the use of the dl element to mark up metadata of sorts. At the end of the example, one group has two metadata labels ("Authors" and "Editors") and two values ("Robert Rothman" and "Daniel Jackson"). This example also uses the div element around the groups of dt and dd element, to aid with styling.</p> <p>In this example a dl element represents a set of terms, each of which has multiple descriptions:</p>
<pre>&lt;dl&gt; <pre>&lt;p&gt;Information about the rock band Queen:&lt;/p&gt;
&lt;div&gt;&lt;dl&gt;
&lt;dt&gt; Last modified time &lt;/dt&gt; &lt;dt&gt;Members&lt;/dt&gt;
&lt;dd&gt; 2004-12-23T23:33Z &lt;/dd&gt; &lt;dd&gt;Brian May&lt;/dd&gt;
&lt;/div&gt; &lt;dd&gt;Freddie Mercury&lt;/dd&gt;
&lt;div&gt; &lt;dd&gt;John Deacon&lt;/dd&gt;
&lt;dt&gt; Recommended update interval &lt;/dt&gt; &lt;dd&gt;Roger Taylor&lt;/dd&gt;
&lt;dd&gt; 60s &lt;/dd&gt; &lt;dt&gt;Record labels&lt;/dt&gt;
&lt;/div&gt; &lt;dd&gt;EMI&lt;/dd&gt;
&lt;div&gt; &lt;dd&gt;Parlophone&lt;/dd&gt;
&lt;dt&gt; Authors &lt;/dt&gt; &lt;dd&gt;Capitol&lt;/dd&gt;
&lt;dt&gt; Editors &lt;/dt&gt; &lt;dd&gt;Hollywood&lt;/dd&gt;
&lt;dd&gt; Robert Rothman &lt;/dd&gt; &lt;dd&gt;Island&lt;/dd&gt;
&lt;dd&gt; Daniel Jackson &lt;/dd&gt;
&lt;/div&gt;
&lt;/dl&gt;</pre>&lt;/dl&gt;</pre>
</div></div>
<p>The order of term-description groups within a dl element, and the order of terms and descriptions within each group, may be significant.</p>
<div class="example"><div class="example">
<p>The following example shows the dl element used to give a set of instructions. The order of the instructions here is important (in the other examples, the order of the blocks was not important).</p> <p>In this example a dl is used to show a set of instructions, where the order of the instructions is important:</p>
<pre>&lt;p&gt;Determine the victory points as follows (use the <pre>&lt;p&gt;Determine the victory points as follows (use the first matching case):&lt;/p&gt;
first matching case):&lt;/p&gt;
&lt;dl&gt;&lt;dl&gt;
&lt;dt&gt; If you have exactly five gold coins &lt;/dt&gt; &lt;dt&gt; If you have exactly five gold coins &lt;/dt&gt;
&lt;dd&gt; You get five victory points &lt;/dd&gt; &lt;dd&gt; You get five victory points &lt;/dd&gt;
&lt;dt&gt; If you have one or more gold coins, and you have one or more silver coins &lt;/dt&gt; &lt;dt&gt; If you have one or more gold coins, and you have one or more silver coins &lt;/dt&gt;
&lt;dd&gt; You get two victory points &lt;/dd&gt; &lt;dd&gt; You get two victory points &lt;/dd&gt;
&lt;dt&gt; If you have one or more silver coins &lt;/dt&gt; &lt;dt&gt; If you have one or more silver coins &lt;/dt&gt;
&lt;dd&gt; You get one victory point &lt;/dd&gt; &lt;dd&gt; You get one victory point &lt;/dd&gt;
&lt;dt&gt; Otherwise &lt;/dt&gt; &lt;dt&gt; Otherwise &lt;/dt&gt;
&lt;dd&gt; You get no victory points &lt;/dd&gt; &lt;dd&gt; You get no victory points &lt;/dd&gt;
&lt;/dl&gt;</pre>&lt;/dl&gt;</pre>
</div></div>
<div class="example"><p>If a dl element contains no dt or dd child elements, it contains no term-description groups.</p>
<p>The following snippet shows a dl element being used as a glossary. Note the use of dfn to indicate the word being defined.</p><p>If a dl element has one or more non-white space text node children, or has children that are neither dt or dd elements, then all such text nodes and elements as well as their descendants (including any dt and dd elements) do not form part of any term-description group within the dl.</p>
<pre>&lt;dl&gt;<p>If a dl element has one or more dt element children, but no dd element children, then it consists of one group with terms but no descriptions.</p>
&lt;dt&gt;&lt;dfn&gt;Apartment&lt;/dfn&gt;, n.&lt;/dt&gt;<p>If a dl element has one or more dd element children, but no dt element children, it consists of one group with descriptions but no terms.</p>
&lt;dd&gt;An execution context grouping one or more threads with one or<p>If a dd element is the first child of a dl element (excepting a script-supporting element), the first group has no associated term.</p>
more COM objects.&lt;/dd&gt;<p>If a dt element is the last child of a dl element (excepting a script-supporting element), the last group has no associated descriptions.</p>
&lt;dt&gt;&lt;dfn&gt;Flat&lt;/dfn&gt;, n.&lt;/dt&gt;<p class="note">Note: when a dl element does not match its content model, it is often because a dd element has been used instead of a dt element, or vice versa.</p>
&lt;dd&gt;A deflated tire.&lt;/dd&gt;
&lt;dt&gt;&lt;dfn&gt;Home&lt;/dfn&gt;, n.&lt;/dt&gt;
&lt;dd&gt;The user's login directory.&lt;/dd&gt;
&lt;/dl&gt;</pre>
</div>
<div class="example">
<p>This example uses microdata attributes in a dl element, together with the div element, to annotate the ice cream desserts at a French restaurant.</p>
<pre lang="fr">&lt;dl&gt;
&lt;div itemscope itemtype="http://schema.org/Product"&gt;
&lt;dt itemprop="name"&gt;Café ou Chocolat Liégeois
&lt;dd itemprop="offers" itemscope itemtype="http://schema.org/Offer"&gt;
&lt;span itemprop="price"&gt;3.50&lt;/span&gt;
&lt;data itemprop="priceCurrency" value="EUR"&gt;€&lt;/data&gt;
&lt;dd itemprop="description"&gt;
2 boules Café ou Chocolat, 1 boule Vanille, sause café ou chocolat, chantilly
&lt;/div&gt;
&lt;div itemscope itemtype="http://schema.org/Product"&gt;
&lt;dt itemprop="name"&gt;Américaine
&lt;dd itemprop="offers" itemscope itemtype="http://schema.org/Offer"&gt;
&lt;span itemprop="price"&gt;3.50&lt;/span&gt;
&lt;data itemprop="priceCurrency" value="EUR"&gt;€&lt;/data&gt;
&lt;dd itemprop="description"&gt;
1 boule Crème brûlée, 1 boule Vanille, 1 boule Caramel, chantilly
&lt;/div&gt;
&lt;/dl&gt;</pre>
<p>Without the div element the markup would need to use the itemref attribute to link the data in the dd elements with the item, as follows.</p>
<pre lang="fr">&lt;dl&gt;
&lt;dt itemscope itemtype="http://schema.org/Product" itemref="1-offer 1-description"&gt;
&lt;span itemprop="name"&gt;Café ou Chocolat Liégeois&lt;/span&gt;
&lt;dd id="1-offer" itemprop="offers" itemscope itemtype="http://schema.org/Offer"&gt;
&lt;span itemprop="price"&gt;3.50&lt;/span&gt;
&lt;data itemprop="priceCurrency" value="EUR"&gt;€&lt;/data&gt;
&lt;dd id="1-description" itemprop="description"&gt;
2 boules Café ou Chocolat, 1 boule Vanille, sause café ou chocolat, chantilly
&lt;dt itemscope itemtype="http://schema.org/Product" itemref="2-offer 2-description"&gt;
&lt;span itemprop="name"&gt;Américaine&lt;/span&gt;
&lt;dd id="2-offer" itemprop="offers" itemscope itemtype="http://schema.org/Offer"&gt;
&lt;span itemprop="price"&gt;3.50&lt;/span&gt;
&lt;data itemprop="priceCurrency" value="EUR"&gt;€&lt;/data&gt;
&lt;dd id="2-description" itemprop="description"&gt;
1 boule Crème brûlée, 1 boule Vanille, 1 boule Caramel, chantilly
&lt;/dl&gt;</pre>
</div>
<p class="note">The dl element is inappropriate for marking up dialogue. See some examples of how to mark up dialogue.</p>

Navigation

Legends:

WHATWG HTML Standard

A section available at WHATWG HTML Standard.

W3C HTML

A section available at W3C HTML.

Previous section
WHATWG HTML StandardW3C HTMLThe li element
Next section
WHATWG HTML StandardW3C HTMLThe dt element