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
- Considered palpable content if the element has at least one
- Can contain as direct children
liand script-supporting elements.
- Quite a few ARIA role attributes available besides the default
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
- Besides global HTML attributes, has ordinal
valueattribute if it’s a child of an
- It is valid HTML to omit the closing tag if the list item is immediately followed by another
lior has no following siblings in the
- The default ARIA role is
listitem. You could instead set it to
- “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.
<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
ddelements; you could have several
dd(definitions) for one
dt(term), or use the same
dt(terms) to link them to one
- For that reason, if there are multiple paragraphs in a value, those all need to go inside the same
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
- Can’t have
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.
dtelement itself, when used in a
dlelement, does not indicate that its contents are a term being defined, but this can be indicated using the
dfnis 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
- 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.