Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow <div> around each <dt><dd> group in <dl> #1945

Merged
merged 7 commits into from
Oct 31, 2016
Merged

Allow <div> around each <dt><dd> group in <dl> #1945

Changes from 3 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
727674c
Allow <div> around each <dt><dd> group in <dl>
zcorpan Oct 21, 2016
5f61b69
dl is an allowed parent of div
zcorpan Oct 24, 2016
2807854
Add an example of dl+div with microdata
zcorpan Oct 24, 2016
e5c0f2d
Replace the set of rules about name-value groups with an algorithm
zcorpan Oct 24, 2016
59ce458
Fixup (missing 'then's, wrap too long lines)
zcorpan Oct 24, 2016
347ae86
Use priceCurrency in example, per schema.org guidelines
zcorpan Oct 26, 2016
663f43a
Omit optional end tags in microdata example to make it more compact
zcorpan Oct 26, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
169 changes: 135 additions & 34 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17812,7 +17812,8 @@ interface <dfn>HTMLLIElement</dfn> : <span>HTMLElement</span> {
<dt><span data-x="concept-element-contexts">Contexts in which this element can be used</span>:</dt>
<dd>Where <span>flow content</span> is expected.</dd>
<dt><span data-x="concept-element-content-model">Content model</span>:</dt>
<dd>Zero or more groups each consisting of one or more <code>dt</code> elements followed by one or more <code>dd</code> elements, optionally intermixed with <span>script-supporting elements</span>.</dd>
<dd>Either: Zero or more groups each consisting of one or more <code>dt</code> elements followed by one or more <code>dd</code> elements, optionally intermixed with <span>script-supporting elements</span>.</dd>
<dd>Or: One or more <code>div</code> elements, optionally intermixed with <span>script-supporting elements</span>.</dd>
<dt><span data-x="concept-element-attributes">Content attributes</span>:</dt>
<dd><span>Global attributes</span></dd>
<dt><span data-x="concept-element-dom">DOM interface</span>:</dt><!--TOPIC:DOM APIs-->
Expand All @@ -17824,9 +17825,12 @@ interface <dfn>HTMLDListElement</dfn> : <span>HTMLElement</span> {};</pre>

<p>The <code>dl</code> element <span>represents</span> an association list consisting of zero or
more name-value groups (a description list). A name-value group consists of one or more names
(<code>dt</code> elements) followed by one or more values (<code>dd</code> elements), ignoring any
nodes other than <code>dt</code> and <code>dd</code> elements. Within a single <code>dl</code>
element, there should not be more than one <code>dt</code> element for each name.</p>
(<code>dt</code> elements, possibly as children of a <code>div</code> element child) followed by
one or more values (<code>dd</code> elements, possibly as children of a <code>div</code> element
child), ignoring any nodes other than <code>dt</code> and <code>dd</code> element children, and
<code>dt</code> and <code>dd</code> elements that are children of <code>div</code> element
children. Within a single <code>dl</code> element, there should not be more than one
<code>dt</code> element for each name.</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>
Expand All @@ -17837,28 +17841,50 @@ interface <dfn>HTMLDListElement</dfn> : <span>HTMLElement</span> {};</pre>
<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 <span>microdata</span> attributes, or other <span>global
attributes</span> that apply to whole groups, or just for styling purposes, each group in a
<code>dl</code> element can be wrapped in a <code>div</code> element. This does not change the
semantics of the <code>dl</code> element.</p>

<div w-nodev>

<p>If a <code>dl</code> element has no <code>dt</code> or <code>dd</code> element children, it
contains no groups.</p>
<p>If a <code>dl</code> element has no <code>dt</code> or <code>dd</code> element children, or if
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm thinking of replacing these paragraphs with an algorithm for how to get the groups of a dl element, since right now they are probably a bit confusing and not so helpful if someone wants to actually get the groups of a dl element (in an HTML scraping tool for example).

My thinking is that the algorithm should be something like this:
http://software.hixie.ch/utilities/js/live-dom-viewer/saved/4601

it has <code>div</code> element children but those have no <code>dt</code> or <code>dd</code>
element children, it contains no groups.</p>

<p>If a <code>dl</code> element has one or more non-<span data-x="inter-element
whitespace">whitespace</span> <code>Text</code> node children, or has child elements that are
neither <code>dt</code> nor <code>dd</code> elements, all such <code>Text</code> nodes and
elements, as well as their descendants (including any <code>dt</code> or <code>dd</code>
whitespace">whitespace</span> <code>Text</code> node children, or has child elements that are not
<code>dt</code>, <code>dd</code>, or <code>div</code> elements, all such <code>Text</code> nodes
and elements, as well as their descendants (including any <code>dt</code> or <code>dd</code>
elements), do not form part of any groups in that <code>dl</code>.</p>

<p>If a <code>dl</code> element has one or more <code>dt</code> element children but no
<code>dd</code> element children, then it consists of one group with names but no values.</p>
<p>If a <code>dl</code> element has one or more <code>div</code> elements that in turn have one or
more non-<span data-x="inter-element whitespace">whitespace</span> <code>Text</code> node
children, or has child elements that are not <code>dt</code> or <code>dd</code> elements, all such
<code>Text</code> nodes and elements, as well as their descendants (including any <code>dt</code>
or <code>dd</code> elements), do not form part of any groups in that <code>dl</code>.</p>

<p>If a <code>dl</code> element has one or more <code>dd</code> element children but no
<code>dt</code> element children, then it consists of one group with values but no names.</p>
<p>If a <code>dl</code> element has one or more <code>dt</code> element children, or one or more
<code>div</code> element children that in turn have one or more <code>dt</code> element children,
but no <code>dd</code> element children and no <code>div</code> element children that in turn have
one or more <code>dd</code> element children, then it consists of one group with names but no
values.</p>

<p>If a <code>dl</code> element's first <code>dt</code> or <code>dd</code> element child is a
<code>dd</code> element, then the first group has no associated name.</p>
<p>If a <code>dl</code> element has one or more <code>dd</code> element children, or one or more
<code>div</code> element children that in turn have one or more <code>dd</code> element children,
but no <code>dt</code> element children and no <code>div</code> element children that in turn have
one or more <code>dt</code> element children, then it consists of one group with values but no
names.</p>

<p>If a <code>dl</code> element's last <code>dt</code> or <code>dd</code> element child is a
<code>dt</code> element, then the last group has no associated value.</p>
<p>If a <code>dl</code> element's first <code>dt</code> or <code>dd</code> element child, or first
<code>dt</code> or <code>dd</code> element child of a <code>div</code> element child, in
<span>tree order</span>, is a <code>dd</code> element, then the first group has no associated
name.</p>

<p>If a <code>dl</code> element's first <code>dt</code> or <code>dd</code> element child, or first
<code>dt</code> or <code>dd</code> element child of a <code>div</code> element child, in
<span>tree order</span>, is a <code>dd</code> element, then the first group has no associated
value.</p>

<p class="note">When a <code>dl</code> element doesn't match its content model, it is often due to
accidentally using <code>dd</code> elements in the place of <code>dt</code> elements and vice
Expand Down Expand Up @@ -17898,18 +17924,26 @@ interface <dfn>HTMLDListElement</dfn> : <span>HTMLElement</span> {};</pre>

<p>The following example illustrates the use of the <code>dl</code> 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").</p>
and two values ("Robert Rothman" and "Daniel Jackson"). This example also uses the
<code>div</code> element around the groups of <code>dt</code> and <code>dd</code> element, to aid
with styling.</p>

<pre>&lt;dl&gt;
&lt;dt&gt; Last modified time &lt;/dt&gt;
&lt;dd&gt; 2004-12-23T23:33Z &lt;/dd&gt;
&lt;dt&gt; Recommended update interval &lt;/dt&gt;
&lt;dd&gt; 60s &lt;/dd&gt;
&lt;dt&gt; Authors &lt;/dt&gt;
&lt;dt&gt; Editors &lt;/dt&gt;
&lt;dd&gt; Robert Rothman &lt;/dd&gt;
&lt;dd&gt; Daniel Jackson &lt;/dd&gt;
&lt;/dl&gt;</pre>
<pre>&lt;dl>
&lt;div>
&lt;dt> Last modified time &lt;/dt>
&lt;dd> 2004-12-23T23:33Z &lt;/dd>
&lt;/div>
&lt;div>
&lt;dt> Recommended update interval &lt;/dt>
&lt;dd> 60s &lt;/dd>
&lt;/div>
&lt;div>
&lt;dt> Authors &lt;/dt>
&lt;dt> Editors &lt;/dt>
&lt;dd> Robert Rothman &lt;/dd>
&lt;dd> Daniel Jackson &lt;/dd>
&lt;/div>
&lt;/dl></pre>
</div>

<div class="example">
Expand Down Expand Up @@ -17948,6 +17982,64 @@ first matching case):&lt;/p&gt;
&lt;/dl></pre>
</div>

<div class="example">

<p>This example uses <span>microdata</span> attributes in a <code>dl</code> element, together
with the <code>div</code> element, to annotate the ice cream desserts at a French restaurant.</p>
<!-- https://commons.wikimedia.org/wiki/File:Carte_des_desserts_2012_des_cafétérias_Toquenelle_(1).jpg -->

<pre lang="fr">&lt;dl>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does div need its "contexts in which this element can be used" updated?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done.

&lt;div itemscope itemtype="http://schema.org/Product">
&lt;dt itemprop="name">Café ou Chocolat Liégeois&lt;/dt>
&lt;dd itemprop="offers" itemscope itemtype="http://schema.org/Offer">
&lt;span itemprop="price">3.50 €&lt;/span>
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Use the priceCurrency property (with ISO 4217 codes e.g. "USD") instead of including ambiguous symbols such as '$' in the value.

http://schema.org/price

&lt;/dd>
&lt;dd itemprop="description">
2 boules Café ou Chocolat, 1 boule Vanille, sause café ou chocolat, chantilly
&lt;/dd>
&lt;/div>

&lt;div itemscope itemtype="http://schema.org/Product">
&lt;dt itemprop="name">Américaine&lt;/dt>
&lt;dd itemprop="offers" itemscope itemtype="http://schema.org/Offer">
&lt;span itemprop="price">3.50 €&lt;/span>
&lt;/dd>
&lt;dd itemprop="description">
1 boule Crème brûlée, 1 boule Vanille, 1 boule Caramel, chantilly
&lt;/dd>
&lt;/div>
&lt;/dl></pre>

<p>Without the <code>div</code> element the markup would need to use the <code
data-x="attr-itemref">itemref</code> attribute to link the data in the <code>dd</code> elements
with the item, as follows.</p>

<pre lang="fr">&lt;dl>
&lt;dt itemscope itemtype="http://schema.org/Product" itemref="1-offer 1-description">
&lt;span itemprop="name">Café ou Chocolat Liégeois&lt;/span>
&lt;/dt>
&lt;dd id="1-offer" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
&lt;span itemprop="price">3.50 €&lt;/span>
&lt;/dd>
&lt;dd id="1-description" itemprop="description">
2 boules Café ou Chocolat, 1 boule Vanille, sause café ou chocolat, chantilly
&lt;/dd>

&lt;div>
&lt;dt itemscope itemtype="http://schema.org/Product" itemref="2-offer 2-description">
&lt;span itemprop="name">Américaine&lt;/span>
&lt;/dt>
&lt;dd id="2-offer" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
&lt;span itemprop="price">3.50 €&lt;/span>
&lt;/dd>
&lt;dd id="2-description" itemprop="description">
1 boule Crème brûlée, 1 boule Vanille, 1 boule Caramel, chantilly
&lt;/dd>
&lt;/div>
&lt;/dl></pre>

</div>

<p class="note">The <code>dl</code> element is inappropriate for marking up dialogue. <a
href="#conversations">Examples of how to mark up dialogue</a> are shown below.</p>

Expand All @@ -17960,6 +18052,7 @@ first matching case):&lt;/p&gt;
<dd>None.</dd>
<dt><span data-x="concept-element-contexts">Contexts in which this element can be used</span>:</dt>
<dd>Before <code>dd</code> or <code>dt</code> elements inside <code>dl</code> elements.</dd>
<dd>Before <code>dd</code> or <code>dt</code> elements inside <code>div</code> elements that are children of a <code>dl</code> element.</dd>
<dt><span data-x="concept-element-content-model">Content model</span>:</dt>
<dd><span>Flow content</span>, but with no <code>header</code>, <code>footer</code>, <span>sectioning content</span>, or <span>heading content</span> descendants.</dd>
<dt><span data-x="concept-element-attributes">Content attributes</span>:</dt>
Expand Down Expand Up @@ -18003,6 +18096,7 @@ first matching case):&lt;/p&gt;
<dd>None.</dd>
<dt><span data-x="concept-element-contexts">Contexts in which this element can be used</span>:</dt>
<dd>After <code>dt</code> or <code>dd</code> elements inside <code>dl</code> elements.</dd>
<dd>After <code>dt</code> or <code>dd</code> elements inside <code>div</code> elements that are children of a <code>dl</code> element.</dd>
<dt><span data-x="concept-element-content-model">Content model</span>:</dt>
<dd><span>Flow content</span>.</dd>
<dt><span data-x="concept-element-attributes">Content attributes</span>:</dt>
Expand Down Expand Up @@ -18343,8 +18437,10 @@ included with Exhibit B.
<dd><span>Palpable content</span>.</dd>
<dt><span data-x="concept-element-contexts">Contexts in which this element can be used</span>:</dt>
<dd>Where <span>flow content</span> is expected.</dd>
<dd>As a child of a <code>dl</code> element.</dd>
<dt><span data-x="concept-element-content-model">Content model</span>:</dt>
<dd><span>Flow content</span>.</dd>
<dd>If the element is a child of a <code>dl</code> element: one or more <code>dt</code> elements followed by one or more <code>dd</code> elements, optionally intermixed with <span>script-supporting elements</span>.</dd>
<dd>If the element is not a child of a <code>dl</code> element: <span>Flow content</span>.</dd>
<dt><span data-x="concept-element-attributes">Content attributes</span>:</dt>
<dd><span>Global attributes</span></dd>
<dt><span data-x="concept-element-dom">DOM interface</span>:</dt><!--TOPIC:DOM APIs-->
Expand All @@ -18357,7 +18453,8 @@ interface <dfn>HTMLDivElement</dfn> : <span>HTMLElement</span> {};</pre>
<p>The <code>div</code> element has no special meaning at all. It <span>represents</span> its
children. It can be used with the <code data-x="attr-class">class</code>, <code
data-x="attr-lang">lang</code>, and <code data-x="attr-title">title</code> attributes to mark up
semantics common to a group of consecutive elements.</p>
semantics common to a group of consecutive elements. It can also be used in a <code>dl</code>
element, wrapping groups of <code>dt</code> and <code>dd</code> elements.</p>

<p class="note">Authors are strongly encouraged to view the <code>div</code> element as an element
of last resort, for when no other element is suitable. Use of more appropriate elements instead of
Expand Down Expand Up @@ -114834,7 +114931,8 @@ interface <dfn>External</dfn> {
<th><code>dd</code></th>
<td>Content for corresponding <code>dt</code> element(s)</td>
<td>none</td>
<td><code>dl</code></td>
<td><code>dl</code>;
<code>div</code>*</td>
<td><span data-x="Flow content">flow</span></td>
<td><span data-x="global attributes">globals</span></td>
<td><code>HTMLElement</code></td>
Expand Down Expand Up @@ -114894,10 +114992,11 @@ interface <dfn>External</dfn> {

<tr>
<th><code>div</code></th>
<td>Generic flow container</td>
<td>Generic flow container, or container for name-value groups in <code>dl</code> elements</td>
<td><span data-x="Flow content">flow</span>;
<span data-x="Palpable content">palpable</span></td>
<td><span data-x="Flow content">flow</span></td>
<td><span data-x="Flow content">flow</span>;
<code>dl</code></td>
<td><span data-x="Flow content">flow</span></td>
<td><span data-x="global attributes">globals</span></td>
<td><code>HTMLDivElement</code></td>
Expand All @@ -114911,6 +115010,7 @@ interface <dfn>External</dfn> {
<td><span data-x="Flow content">flow</span></td>
<td><code>dt</code>*;
<code>dd</code>*;
<code>div</code>*;
<span>script-supporting elements</span></td>
<td><span data-x="global attributes">globals</span></td>
<td><code>HTMLDListElement</code></td>
Expand All @@ -114920,7 +115020,8 @@ interface <dfn>External</dfn> {
<th><code>dt</code></th>
<td>Legend for corresponding <code>dd</code> element(s)</td>
<td>none</td>
<td><code>dl</code></td>
<td><code>dl</code>;
<code>div</code>*</td>
<td><span data-x="Flow content">flow</span>*</td>
<td><span data-x="global attributes">globals</span></td>
<td><code>HTMLElement</code></td>
Expand Down