Errata for Chapter 2

1,2 editions, Page 26 - 27

The <time> element was removed, and restored. It's not fully specified yet, but the good news is that the new incarnation is more powerful than it was before.

Previously, you could only mark up precise dates. So, 13 November 1905 could be expressed in HTML <time datetime="1905-11-13"> but November 1905 couldn't be. This is a problem for historians where sometimes the precise date isn't known.

Now, "fuzzy dates" are possible:

As before, times are expressed using the 24 hour clock. Now, you can separate the date and time with a space rather than a "T" (but you don't have to). So both of these are valid:

You can localise times, as before. Appending "Z" to the timezone indicates UTC (a way of saying "GMT" without it being comprehensible to normal people). Otherwise, use an offset:

Durations

In New! Improved! HTML5 <time>, you can represent durations, with the prefix "P" for "period".

The datetime attribute "D" for days, "H" for hours, "M" for minutes and "XQ" for seconds. Just kidding - that's "S".

You can separate them with spaces (but you don't have to). So <time datetime="P4D"> is a duration of 4 days, as is <time datetime="P 4 D">.

Using a "T" after the "P" marker allows you to be more precise: <time datetime="PT23H 9M 2.343S"> is a duration of 23 hours, 9 minutes and 2.345 seconds.

Alternatively, you can use a duration time component.

Whichever you choose, it's represented internally as a number of seconds. Because of this, you can't specify a duration in terms of months, because a month isn't a precise number of seconds; a month can last from 28 to 31 days. Similarly, a year isn't a precise number of seconds; it's 12 months and February sometimes has an extra day.

You still can't represent dates before the Christian era, as years can't be negative. Neither can you indicate date ranges. To mark up From "21/02/2012 to 25/02/2012", use two separate <time> elements.

pubdate

The pubdate attribute (a boolean that indicates that this particular date is the publication date of the parent <article> (or, if there is none, the whole document) has gone. However (hat-tip @mathias and @moddular) you can use HTML5 microdata's equivalent itemprop=datePublished for appropriate itemtypes. In this example, we use schema.org's Blog schema:


<article itemscope itemtype="http://schema.org/Blog">
  <header>
    <h1>Blog post</h1>
    <time datetime="2012-07-30" itemprop="datePublished">Published 30th July 2012</time>
  </header>
…
</article>
1 edition, Page 28; 2 edition, Page 29 (Using <blockquote> <footer>s)

After discussion on the mailing list, using <footer> inside a <blockquote> to attribute the quotation is wrong and evil (the attribution isn't actually part of the quotation.)

A pattern might be

<figure>
<blockquote>
Lawks-a-lawdy, my bottom's on fire!
</blockquote>
<figcaption>Joan of Arc</figcaption>
</figure>

Hixie writes

I expect we will eventually create a <credit> element that goes inside <blockquote>, <figure> or <figcaption>, <caption>, and maybe other contexts as well. At the moment, I'm deferring adding it so that we can see how <figure> and the other new elements do in the wild.

1 edition page 33, 2 edition page 35: <hgroup>

The <hgroup> element has been removed. So how do you now mark up taglines and subheaders? Simply: as you always have. The spec now discusses this in the Common idioms without dedicated elements section.

Three methods are suggested. The simplest is simply with punctuation:

<h1>The Lord of the Rings: The Two Towers</h1>

The second is by using a <span> inside a heading element that allows you to style the secondary part, for example with h1 span {display:block; font-style:italic;}:

<h1>The Mothers 
   <span>Fillmore East - June 1971</span> 
</h1>

The third (and the one I generally use)

<header>
<h1>The Mothers</h1>
<p>Fillmore East - June 1971</p>
</header>
1 edition, Page 50 (first paragraph)

"Some of these obviously match HTML5 elements such as <article>, <form>, <heading> …"

<heading> should read <header>. What a numpty, eh?

1 edition, Page 53, <figure> section

See the example, coded:


<figure>
<img src=welcome.jpg 
  alt=""> 
<figcaption>
Bruce and Remy welcome questions
<small>Photo © Bruce's mum</small>
</figcaption>
</figure>

Since the book went to press, Steve Faulkner of The Paciello Group pointed out a problem with the alt text in this example.

In figures where the figcaption text tells you all you need to know ("Angelina Jolie and Remy Sharp pose on the red carpet at the premier of 'HTML5! the musical'"), don't duplicate this in alt text.

This is what I've done above, except that I've made a mistake: if an image has empty alt text (eg alt="") it is regarded as being presentational only, and having an implied ARIA role=presentation which would remove the element from the page's accessibility tree (no user agent does this, yet, but that's the general plan).

As the image is not purely presentational (if it were, we wouldn't be marking it up as a figure and giving it a caption) we shouldn't have empty alt, we should use no alternate text at all, e.g.

<img src=welcome.jpg>

Steve has written a very useful document HTML5: Techniques for providing useful text alternatives (that is a First Public Working Draft, therefore very, very susceptible to change) in which he writes

Circumstances in which it is not appropriate to use an empty or null alt attribute: An image is contained within a figure element and has an associated caption provided using the figcaption element.

On the other hand, you may think that the example above needs alt text <img src=welcome.jpg alt="Bruce and Remy glower menacingly into the camera"> because otherwise the joke isn't communicated to a screenreader user.

As an accessibility filip, it's useful to add ARIA attributes to associate the image with the caption until browsers "understand" the figure element and do this automatically.

When there is no alt text, use aria-labelledby to associate the id of the figcaption to the img:

<figure>
<img src=welcome.jpg aria-labelledby=figcap219>
<figcaption id=figcap219>
Angelina Jolie and Remy Sharp pose on the red carpet at the premier of 'HTML5! the musical'
</figcaption>
</figure>

If there is alt text, use aria-describedby:

<figure>
<img src=welcome.jpg 
alt="Bruce and Remy glower menacingly into the camera"
aria-describedby=figcap219>
<figcaption id=figcap219>
Bruce and Remy welcome questions
<small>Photo © Bruce's mum</small>
</figcaption>
</figure>