Skip to main content

Day 72 of 100DaysOfSpec, abbr, data, and time 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.5 Text-level semantics.

4.5.9 The abbr element

Probably I should have tried to get through this section yesterday, as it can be tied in semantic meaning to the dfn element.

“The abbr element represents an abbreviation or acronym, optionally with its expansion.”

  • The title attribute on abbr includes only its expansion: <abbr title=“World Wide Web Consortium”>W3C</abbr>.
  • It’s okay to use the element w/o a title attribute to hook into some CSS styles. Only if it makes semantic sense (is actually an abbreviation/acronym), of course.
  • A title attribute on one abbr element does not cascade to other attr elements in the document containing the same text value.

4.5.10 The data element

“The data element represents its contents, along with a machine-readable form of those contents in the value attribute.”

  • The value attribute is required.
  • Use cases:
    • Provide both a human-readable and a machine-readable format for information in one element. To be honest the only thing I could think of is a date with the ISO format on a value attribute, but in that case you’d be better off using the time element. Can anyone else think of an example?
    • As another way to provide info to scripts, similar to how developers use data-* attributes (those attributes feel more natural to me than using a data element, but ya never know, this could be more semantic in some contexts).

4.5.11 The time element

“The time element represents its contents, along with a machine-readable form of those contents in the datetime attribute.”

  • If you don’t set a datetime attribute, the time element can’t have any element descendents (loosey-goosey text ok).
  • The datetime value has to match one of the syntaxes listed in the spec.


My blog uses Webmentions. Responses from sites which likewise support Webmentions, such as Twitter or people’s personal sites, will show up here.

No Webmentions have been sent to this post yet.