Issue 83 ACTION-152 dt/dd Change Proposal

The following is the deliverable for ISSUE 83,ACTION 152.

Editor: Shelley Powers (shelleyp@burningbird.net)

Please address feedback to the HTML Working Group mailing list (public-html@w3.org).

Summary

Currently the HTML5 specification has repurposed the dt and dd elements in order to provide a content/caption pair in the new elements, figure and details. This change proposal discusses why repurposing these elements causes problems, semantically, syntactically, as well as technically. It also provides one proposed alternative, which is to create a new, "floating" caption that can be used within any HTML element.

Rationale

Previous versions of HTML defined the dt element to be a definition term and dd to be a definition description. Both were used to mark up the terms and definitions within definition lists (denoted by the dl element). They were also used with dialog with the dt element denoting the speaker, and dd the speaker's text.

The HTML5 specification has redefined both the dt and dd elements. According to the specification, a dt element is now a term or name in a definition list; a figure caption, when used with the figure element; the summary when used with a details element. The dd element is the description or definition when used with the dl element; the figure data when used with the figure element; the details of a details element.

The justification for the change is that the two items were redefined anyway with the new dialog element[1], and their use does not violate backwards compatibility. However, the redefinition of the two elements fails on three levels: semantically, syntactically, and technically.

The redefinition of dt/dd fails semantically

When used within the dl element, dt and dd are definition term and definition description, respectively, in a given list of definition terms and their descriptions. An example of their use is the following, from the HTML 4.01 specification:

• Hacker
  

   A clever programmer

• center
• centre
  

   A point equidistant from all points of a surface of a sphere.

   In some field sports, the player who holds the middle position on the field, court, or forward line. 

The point to take away from this discussion is that the definition term and description are a pair of values, with the description providing an alternative longer description for the term, a further definition, or some other complementary value.

This seems to match the use of dt, as a caption for a figure, but the use of dd for the figure contents makes little or no sense. The whole purpose of figure was to encapsulate one or more elements into a single unit, with an optional caption. Now, with the use of dt/dd we're encapsulating content into a single unit with the dd element, which then, in turn, gets encapsulated into yet another element, figure. The seeming purpose for this is solely so that we can use dt for caption, and still maintain the loose semantics associated with the dt/dd pairing. Yet if we drop dt, we have, in effect, two elements performing the same function: dd encapsulating the figure contents, figure encapsulating dd.

One might as well just drop the need for figure, and use dt/dd by themselves, without any container.

This difference in semantics is even more apparant with the details element. In a details element, the dt element supposedly represents the summary of the details, while dd is the details, themselves. The whole purpose of details is to provide a declarative version of the collapsable web page element, where one clicks on a title or other text, and the contents are displayed, pushing down other web page contents. In this case, dt is really nothing more than a placeholder.

There is no shared semantics between the different uses of dt/dd. The reuse of the elements can imply there is, though, and not only cause confusion about the semantics of the elements, but could also cause confusion about how the elements are used, as detailed in the next section.

The redefinition of dt/dd fails syntactically

In previous HTML specifications, the syntax for dt/dd is to provide one or more dt elements, for terms. The dt elements are inline content. The dt elements are then followed by one or more dd elements, which are block content. In addition, the syntax allows multiple terms, as well as multiple definitions

How dt/dd are used syntactically, as currently defined in the HTML5 is significantly different. Enough so to create significant problems in the future, particularly as people learn how to use these older elements with newer HTML5 features.

In the figure element, the dt element isn't required. The lack of dt just implies there is no caption. Yet a dd element without a matching dt in a definition list makes little sense. In addition, where multiple dd elements can be used within a definition list, only one dd element and one dt element is allowed in figure.

In the details element, the dt element has to be the first element, the dd element has to be last, though there's no restriction as to number of each. However, by the vary nature of the details element, one would assume we would have, at most, one of each. In fact, implementation of more than one dt or dd elements in a details element seems problematic.

Such syntactic differences can only lead to a great deal of confusion, and erroneous uses in the future. This, in addition to the technical difficulties the reuse of dt/dd can cause with older browsers.

The redefinition of dt/dd fails technically

In September, Dean Edwards posted a note to the WhatWG email list, providing a link[2] to a test case that demonstrated problems with using dt/dd in figure and details. This issue had also been discussed by Tab Atkins, in the HTML-WG [3], in response to the problem originally noted by Leif Halvard Silli[5]. The problem is that when IE6 or IE7 discovers a dt element outside of a dl, it switches to processing all of the contents that follow as if they're children of the dt element. This includes applying dt styling to the children.

There were various JavaScript hacks proposed to solve this problem, but as the discussion threads demonstrate, these hacks generate negative side effects. Regardless, requiring JavaScript in order to ensure the use of dt/dd don't fail in figure or details in IE6 or IE7 is a non-starter. No use of previously existing declarative markup being redefined in HTML5 should be dependent on JavaScript being enabled to make it work. The use of JavaScript shouldn't even have been contemplated.

Details: Remove repurposed uses of dt/dd

Return the dt/dd element definitions to their original purpose as definition term/definition description.

The solution to the problems encountered with redefining the use of dt/dd in order to use them in figure and details is to remove the redefinition.

Change Section 4.5.10 to read:

4.5.10 The dt element

• Categories
  

   none

• Contexts in which this element may be used:
  

   Before dd or dt elements inside dl elements.

• Content model:
  

   phrasing content

• DOM interface:
  

   Uses HTMLElement 

The dt element represents the term or name part of a term-description group in a description list (dl element).

Change Section 4.5.11 to read:

4.5.11 The dd element

• Categories
  

   none

• Contexts in which this element may be used:
  

   After dt or dd elements inside dl elements.

• Content model:
  

   Flow content

• Content attributes:
  

   Global attributes

• DOM interface:
  

   Uses HTMLElement

The dd element represents the description, definition, or value par of a term-description group in a description list (dl element).

A dl can be used to define a vocabulary list, like in a dictionary. In the following example, each entry, given by a dt with a dfn, has several dds, showing the various parts of the definition.

<dl>
 <dt><dfn>happiness</dfn></dt>
 <dd class="pronunciation">/'hæ p. nes/</dd>
 <dd class="part-of-speech"><i><abbr>n.</abbr></i></dd>
 <dd>The state of being happy.</dd>
 <dd>Good fortune; success. <q>Oh <b>happiness</b>! It worked!</q></dd>
 <dt><dfn>rejoice</dfn></dt>
 <dd class="pronunciation">/ri jois'/</dd>
 <dd><i class="part-of-speech"><abbr>v.intr.</abbr></i> To be delighted oneself.</dd>
 <dd><i class="part-of-speech"><abbr>v.tr.</abbr></i> To cause one to be delighted.</dd>
</dl>

Details: Proposals for figure and details

The solution for Issue-83 is to return the dt/dd elements to their original semantic use, in the definition list (the dl) element. However, this leaves gaps in functionality in two other sections of the HTML5 specification: in section 4.8.1 on the figure element, and in section 4.11.1 on the details element.

After reviewing most of the discussion related to this issue, including the previous referenced emails, as well as weblog articles[4], there are a couple of viable options for handling the gaps left by pulling dt/dd from figure and details.

The first is to remove figure and details from the HTML5 specification. The more I read about these elements, the more I think this is the better option. However, pursuing this option should occur through separate bug/issues, unrelated to correcting the re-specification of dt/dd.

Instead, in this proposal, I'm following the second option, which is to create a new element that can fulfill the role of caption for both figure and details, without using existing element names. Since this caption can be used in more than one element, can be optional, can occur as the first element in a container, or the last, I propose that we create what I'm going to call a floating caption, with the name of fltcap, for want of a better term.

Add new element section for fltcap

• Categories
  

   None

• Contexts in which this element may be used:
  

   As the only fltcap element in a figure element

   As the first child in a details element

• Content model
  

   phrasing content

• Content Attributes
  

   Global attributes

• DOM Interface
  

   Uses HTMLElement 

The fltcap element represents the caption of a figure element, or summary of a details element.

Note: The exact wording describing this new element can be modified. The key point of its use is that it can be used for multiple container elements, including figure and details, and new container elements in the future. In addition, the exact name and element abbreviation is unimportant, as long as there's no conflict with existing HTML elements. However, I would recommend against the use of rubric, primarily because of the color associations with the term. I also don't recommend the use of c because there is such a thing as an element that's too short. There is nothing semantically meaningful about 'c', outside of Einstein's famous equation.

Modify figure and details to use new element

Modify Section 4.8.1, the figure element, by replacing all references to dt with the new element fltcap. Remove all references to the use of dd, including within the code examples.

Modify Section 4.11.1, the details element, by replacing all references to dt with the new element fltcap. Remove all references to the use of dd, including within the code examples.

Impact

Positive

Returning the dt/dd elements back to their original purpose will no longer introduce confusion about the semantics of the elements, and, more importantly, also eliminate the confusion about the syntax for these elements.

In addition, returning the dt/dd elements back to their original purpose will eliminate any of the technical problems with their use.

The new floating caption for figure and details will not generate a problem with backwards compatibility, because the element is new.

Negative

This proposal requires the creation of one new element.

References

1. Re: Implementor feedback on new elements in HTML5 - Jeremy Keith, September 14, 2009.
2. The new content model for <details> breaks rendering in MSIE5-7 - Dean Edwards, September 29 2009.
3. Re: dt/dd in figure/details has killer rendering issues in ie6 and ie7 - Leif Halvard Silli, September 19, 2009.
4. dd-details wrong again - Remy Sharp, October 12, 2009.
5. Re: what is dt? - Leif Halvard Silli, September 18, 2009.