From 5454d702e0262749aba55576dda32c48e0e498f0 Mon Sep 17 00:00:00 2001 From: Simon Pieters Date: Mon, 31 Oct 2016 09:25:43 +0100 Subject: [PATCH] Allow
around each
group in
(#1945) This only changes the content model and the rules for determining what a dl element represents. Fixes #1937. --- source | 204 ++++++++++++++++++++++++++++++++++++++++++++++----------- 1 file changed, 167 insertions(+), 37 deletions(-) diff --git a/source b/source index a2552c1ab57..d62312c0048 100644 --- a/source +++ b/source @@ -3138,6 +3138,7 @@ a.setAttribute('href', 'http://example.com/'); // change the content attribute d
  • The child concept
  • The root and shadow-including root concepts
  • The inclusive ancestor and shadow-including descendant concepts
    • +
  • The first child and next sibling concepts
  • The document element concept
  • The in a document tree, in a document (legacy), and connected concepts
  • The slot concept, and its name and assigned nodes
    • @@ -17812,7 +17813,8 @@ interface HTMLLIElement : HTMLElement {
    Contexts in which this element can be used:
    Where flow content is expected.
    Content model:
    -
    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.
    +
    Or: One or more div elements, optionally intermixed with script-supporting elements.
    Content attributes:
    Global attributes
    DOM interface:
    @@ -17824,9 +17826,12 @@ interface HTMLDListElement : HTMLElement {};

    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) followed by one or more values (dd elements), ignoring any - nodes other than dt and dd elements. Within a single dl - element, there should not be more than one dt element for each name.

    + (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.

    Name-value groups may be terms and definitions, metadata topics and values, questions and answers, or any other groups of name-value data.

    @@ -17837,30 +17842,88 @@ interface HTMLDListElement : HTMLElement {};

    The order of the list of groups, and of the names and values within each group, may be significant.

    +

    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.

    +
    -

    If a dl element has no dt or dd element children, it - contains no groups.

    +

    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).

    + +
      +

    1. Let groups be an empty list of name-value groups.

      2. + +

    2. Let current be a new name-value group.

      3. + +

    3. Let seenDd be false.

      4. + +

    4. Let child be dl's first child.

      5. + +

    5. Let grandchild be null.

      6. + +
    6. +

      While child is not null, follow these substeps:

      + +
        +
      1. +

        If child is a div element, then follow these subsubsteps:

        + +
          +

        1. Let grandchild be child's first child.

          2. + +
        2. +

          While grandchild is not null, follow these subsubsubsteps:

          -

          If a dl element has one or more non-whitespace Text node children, or has child elements that are - neither dt nor dd elements, all such Text nodes and - elements, as well as their descendants (including any dt or dd - elements), do not form part of any groups in that dl.

          +
            +

          1. Process dt or dd for + grandchild.

            2. -

            If a dl element has one or more dt element children but no - dd element children, then it consists of one group with names but no values.

            +

          2. Set grandchild to grandchild's next + sibling.

            3. +
          +
          3. +
        +
        2. -

        If a dl element has one or more dd element children but no - dt element children, then it consists of one group with values but no names.

        +

      2. Otherwise, process dt or dd for + child.

        3. -

        If a dl element's first dt or dd element child is a - dd element, then the first group has no associated name.

        +

      3. Set child to child's next sibling.

        4. +
      +
      7. -

      If a dl element's last dt or dd element child is a - dt element, then the last group has no associated value.

      +

    7. If current is not empty, then append current to + groups.

      8. -

      When a dl element doesn't match its content model, it is often due to +

    8. Return groups.

      9. +
    + +

    To process dt or dd for a node node means to + follow these steps:

    + +
      +

    1. Let groups, current, and seenDd be the same variables as + those of the same name in the algorithm that invoked these steps.

      2. + +
    2. +

      If node is a dt element, then follow these substeps:

      + +
        +

      1. If seenDd is true, then append current to groups, set + current to a new name-value group, and set seenDd to false.

        2. + +

      2. Append node to current's name.

        3. +
      +
      3. + +

    3. Otherwise, if node is a dd element, then append node to + current's value and set seenDd to true.

      4. +
    + +

    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.

    @@ -17898,18 +17961,26 @@ interface HTMLDListElement : HTMLElement {};

    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").

    + 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.

    - 
    <dl>
- <dt> Last modified time </dt>
- <dd> 2004-12-23T23:33Z </dd>
- <dt> Recommended update interval </dt>
- <dd> 60s </dd>
- <dt> Authors </dt>
- <dt> Editors </dt>
- <dd> Robert Rothman </dd>
- <dd> Daniel Jackson </dd>
-</dl>
    + 
    <dl>
+ <div>
+  <dt> Last modified time </dt>
+  <dd> 2004-12-23T23:33Z </dd>
+ </div>
+ <div>
+  <dt> Recommended update interval </dt>
+  <dd> 60s </dd>
+ </div>
+ <div>
+  <dt> Authors </dt>
+  <dt> Editors </dt>
+  <dd> Robert Rothman </dd>
+  <dd> Daniel Jackson </dd>
+ </div>
+</dl>
    @@ -17948,6 +18019,56 @@ first matching case):</p> </dl>
    +
    + +

    This example uses microdata attributes in a dl element, together + with the div element, to annotate the ice cream desserts at a French restaurant.

    + + + 
    <dl>
+ <div itemscope itemtype="http://schema.org/Product">
+  <dt itemprop="name">Café ou Chocolat Liégeois
+  <dd itemprop="offers" itemscope itemtype="http://schema.org/Offer">
+   <span itemprop="price">3.50</span>
+   <data itemprop="priceCurrency" value="EUR">€</data>
+  <dd itemprop="description">
+   2 boules Café ou Chocolat, 1 boule Vanille, sause café ou chocolat, chantilly
+ </div>
+
+ <div itemscope itemtype="http://schema.org/Product">
+  <dt itemprop="name">Américaine
+  <dd itemprop="offers" itemscope itemtype="http://schema.org/Offer">
+   <span itemprop="price">3.50</span>
+   <data itemprop="priceCurrency" value="EUR">€</data>
+  <dd itemprop="description">
+   1 boule Crème brûlée, 1 boule Vanille, 1 boule Caramel, chantilly
+ </div>
+</dl>
    + +

    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.

    + + 
    <dl>
+ <dt itemscope itemtype="http://schema.org/Product" itemref="1-offer 1-description">
+  <span itemprop="name">Café ou Chocolat Liégeois</span>
+ <dd id="1-offer" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
+  <span itemprop="price">3.50</span>
+  <data itemprop="priceCurrency" value="EUR">€</data>
+ <dd id="1-description" itemprop="description">
+  2 boules Café ou Chocolat, 1 boule Vanille, sause café ou chocolat, chantilly
+
+ <dt itemscope itemtype="http://schema.org/Product" itemref="2-offer 2-description">
+  <span itemprop="name">Américaine</span>
+ <dd id="2-offer" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
+  <span itemprop="price">3.50</span>
+  <data itemprop="priceCurrency" value="EUR">€</data>
+ <dd id="2-description" itemprop="description">
+  1 boule Crème brûlée, 1 boule Vanille, 1 boule Caramel, chantilly
+</dl>
    + +
    +

    The dl element is inappropriate for marking up dialogue. Examples of how to mark up dialogue are shown below.

    @@ -17960,6 +18081,7 @@ first matching case):</p>
    None.
    Contexts in which this element can be used:
    Before dd or dt elements inside dl elements.
    +
    Before dd or dt elements inside div elements that are children of a dl element.
    Content model:
    Flow content, but with no header, footer, sectioning content, or heading content descendants.
    Content attributes:
    @@ -18003,6 +18125,7 @@ first matching case):</p>
    None.
    Contexts in which this element can be used:
    After dt or dd elements inside dl elements.
    +
    After dt or dd elements inside div elements that are children of a dl element.
    Content model:
    Flow content.
    Content attributes:
    @@ -18343,8 +18466,10 @@ included with Exhibit B.
    Palpable content.
    Contexts in which this element can be used:
    Where flow content is expected.
    +
    As a child of a dl element.
    Content model:
    -
    Flow content.
    +
    If the element is a child of a dl element: one or more dt elements followed by one or more dd elements, optionally intermixed with script-supporting elements.
    +
    If the element is not a child of a dl element: Flow content.
    Content attributes:
    Global attributes
    DOM interface:
    @@ -18357,7 +18482,8 @@ interface HTMLDivElement : HTMLElement {};

    The div element has no special meaning at all. It represents its children. It can be used with the class, lang, and title attributes to mark up - semantics common to a group of consecutive elements.

    + semantics common to a group of consecutive elements. It can also be used in a dl + element, wrapping groups of dt and dd elements.

    Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of @@ -114116,7 +114242,8 @@ interface External { dd Content for corresponding dt element(s) none - dl + dl; + div* flow globals HTMLElement @@ -114176,10 +114303,11 @@ interface External { div - Generic flow container + Generic flow container, or container for name-value groups in dl elements flow; palpable - flow + flow; + dl flow globals HTMLDivElement @@ -114193,6 +114321,7 @@ interface External { flow dt*; dd*; + div*; script-supporting elements globals HTMLDListElement @@ -114202,7 +114331,8 @@ interface External { dt Legend for corresponding dd element(s) none - dl + dl; + div* flow* globals HTMLElement