Day 67 of 100DaysOfSpec, ul, dl, dt, and dd elements

I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. Read the initial intent/backstory. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.

Currently reading in 4.4 Grouping content

UAs = user agents = browsers and other HTML document parsers/renderers

4.4.6 The ul element

“The ul element represents a list of items, where the order of the items is not important — that is, where changing the order would not materially change the meaning of the document.”

Principles below are repeated from yesterday’s reading about the ol element.

• Considered palpable content if the element has at least one li child element.
• Can contain as direct children li and script-supporting elements.
• Quite a few ARIA role attributes available besides the default list: directory, listbox, menu, menubar, presentation, tablist, toolbar, or tree. Get specific with your list semantics!

4.4.7 The li element

“The li element represents a list item. If its parent element is an ol, or ul, then the element is an item of the parent element's list, as defined for those elements. Otherwise, the list item has no defined list-related relationship to any other li element.”

• Restricted to use within an ol or ul element.
• Besides global HTML attributes, has ordinal value attribute if it’s a child of an ol.
• It is valid HTML to omit the closing tag if the list item is immediately followed by another li or has no following siblings in the ol/ul.
• The default ARIA role is listitem. You could instead set it to menuitem, menuitemcheckbox, menuitemradio, option, tab, treeitem or presentation.
• “While it is conforming to include heading elements (e.g. h1) inside li elements, it likely does not convey the semantics that the author intended. A heading starts a new section, so a heading in a list implicitly splits the list into spanning multiple sections.”

4.4.8 The dl element

The dl element represents an association list consisting of zero or more name-value groups (a description list). “Names” are marked up with dt elements, values with dd elements. You could use this markup structure to include a list of vocabulary words and definitions before a highly technical article.

Example:

<dl>
  <dt>Gold Level Sponsors</dt>
  <dd>$1000+</dd>
  <dt>Platinum Level Sponsors</dt>
  <dd>$3000+</dd>
  <dt>Double-Platinum Level Sponsors</dt>
  <dd>$10,000+</dd>
</dl>

• Considered palpable content if the element contains at least one name-value group.

• You don’t necessarily need to have a one-to-one ratio of dt and dd elements; you could have several dd (definitions) for one dt (term), or use the same dfn in 2+ dt (terms) to link them to one dd (definition).

• For that reason, if there are multiple paragraphs in a value, those all need to go inside the same dd element.

• The spec notes to UAs that ordering of name-value groups could be significant. Unsure what they’re seeking to prevent there, maybe a UA might want to surface these definitions in a UI somehow?

• Not to be used to mark up dialog.

4.4.9 The dt element

• Can be used before dd or dt elements inside dl elements
• Can’t have header, footer, sectioning content, or heading content descendants.
• A dt element's end tag may be omitted if the dt element is immediately followed by another dt element or a dd element.
• “The dt element itself, when used in a dl element, does not indicate that its contents are a term being defined, but this can be indicated using the dfn element,” where dfn is a child of the dt. Unsure why it would be so, but I’m guessing whoever was in this working group wanted 2 different levels of semantic specificity.

4.4.10 The dd element

• Can be used after dt or dd elements inside dl elements.
• A dd element's end tag may be omitted if the dd element is immediately followed by another dd element or a dt element, or if there is no more content in the parent element.