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

This only changes the content model and the rules for determining what a dl element represents. Fixes #1937.
whatwg · Oct 21, 2016 · 727674c · 727674c
1 parent 3d19b31
commit 727674c
Showing 1 changed file with 67 additions and 30 deletions.
diff --git a/source b/source
@@ -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-->
@@ -17825,8 +17826,9 @@ 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>
+  nodes other than <code>dt</code>, <code>dd</code>, and <code>div</code> elements. 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>
@@ -17837,28 +17839,49 @@ 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>For styling purposes, due to limitations in CSS, 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
+  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>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 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>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 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'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 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
+  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
@@ -17898,18 +17921,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">
@@ -17960,6 +17991,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>
@@ -18003,6 +18035,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>
@@ -18344,7 +18377,8 @@ included with Exhibit B.
    <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><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-->
@@ -114834,7 +114868,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>
@@ -114911,6 +114946,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>
@@ -114920,7 +114956,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>