This Week in HTML 5 – Episode 32
Welcome back to "This Week in HTML 5," where I'll try to summarize the major activity in the ongoing standards process in the WHATWG and W3C HTML Working Group.
In this article:
- Introducing the
<hgroup>element - (Re)introducing the
accesskeyattribute - (Re)introducing the
window.setTimeoutandwindow.setIntervalfunctions - More
<video>changes - Events
- Other interesting changes this week
- Around the web
Introducing the <hgroup> element
Topping our list of changes this week is the new <hgroup> element:
The hgroup element represents the heading of a section. The element is used to group a set of h1–h6 elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines.
Meanwhile, the <header> element has been redefined:
The header element represents a group of introductory or navigational aids. A header element typically contains the section's heading (an h1–h6 element or an hgroup element), but can also contain other content, such as a table of contents, a search form, or any relevant logos.
Here is an example of how these elements can work together in marking up a specification:
<header>
<hgroup>
<h1>Scalable Vector Graphics (SVG) 1.2</h1>
<h2>W3C Working Draft 27 October 2004</h2>
</hgroup>
<dl>
<dt>This version:</dt>
<dd><a href="http://www.w3.org/TR/2004/WD-SVG12-20041027/">http://www.w3.org/TR/2004/WD-SVG12-20041027/</a></dd>
...
</dl>
</header>
Relevant background reading:
- r3039: Rename
<header>to<hgroup>and restrict it just to supporting subheadings. - r3040: Introduce a new
<header>element. - r3041: Clarify that
<header>does not introduce a new section - r3043: Attempt to resolve the terminology confusion of heading vs header.
- r3050: Disallow
<footer>in<header>since that's probably indicative of an error, so validators should probably report it. - r3051: Disallow
<header>in<address>and<footer>. - the
<hgroup>element - the
<header>element - announcement of the changes on the W3C HTML Working Group mailing list
(Re)introducing the accesskey attribute
Next up in this week's changes is the reintroduction and reformulation of the accesskey attribute. In HTML 4, the accesskey attribute allows the web designer to define keyboard shortcuts for frequently-used links or form fields. In HTML 5,
All elements may have the accesskey content attribute set. The accesskey attribute's value is used by the user agent as a guide for creating a keyboard shortcut that activates or focuses the element.
If the accesskey attribute is used on a non-link, non-form-field element, it defines a command, which has a specific meaning in HTML 5.
Also new in HTML 5: the accesskey attribute may contain a number of shortcuts, space-separated, and the new .accessKeyLabel DOM property contains the shortcut key that the browser ultimately chose.
One possible enhancement, not in HTML 5 but under consideration for HTML 6, is the use of more-than-1-character strings to define roles, such as accesskey="help". The browser could then choose the appropriate shortcut key based on the user's platform and preferences.
I plan to write up a more detailed history of the accesskey attribute in a seperate article. Until then, here is some background reading:
- r3065: define
accesskey. - the
accesskeyattribute - using the
accesskeyattribute to define a command - accesskey announcement on the W3C HTML Working Group mailing list
- accesskey attribute on Google Doctype
(Re)introducing the window.setTimeout and window.setInterval functions
The window.setTimeout and window.setInterval functions have been in a state of limbo in the HTML 5 spec, waiting for an editor to take them and split them out into a separate spec. No editor has come forward, so back into HTML 5 they go.
These timer functions are complicated by their unique history in browser-land. They can take basically anything as their first argument. If you pass a function, it will be executed after the specified interval. If you pass anything else, the browser will call toString() on the parameter and then evaluate it as a JavaScript expression in the context of the current window (or, if the timer function is called from a web worker, the current WorkerUtils object). There is also a little-known but widely supported third argument to setTimeout and setInterval, which passes arguments to the evaluated expression. Meanwhile, the second argument -- the timeout value -- can also be any datatype. Browsers must call toNumber(toString(timeout)) and round down to the nearest integer.
- r3068 defines
window.setTimeoutandwindow.setInterval. - Timers in the HTML 5 specification
- brief mailing list announcement of timer updates
More <video> changes
It seems that each week in HTML 5 brings more changes to the <video> element. While this is not strictly true, it is certainly true this week.
- r3012: tighten up some terminology to account for videos playing backwards
- r3014: fire
errorevents at the<source>element when it fails to load. But never mind that, because it didn't solve the problem, so it was overridden by... - r3027: error events are only fired on
<source>when using<source>elements, or once on<video>if the UA gave up trying to load the video. [Media elements may never load, may load the wrong source, etc] - r3035: a new DOM property,
video.startTime, which returns the earliest possible position. [Start position of media resources and ensuing discussion] - r3049: you can now call
a_canvas_element.getContext('2d').createPattern(a_video_element). [Re: [canvas] Using HTMLVideoElement with createPattern()]
Events
Speaking of events, there was a series of event-related checkins this week. The onundo and onredo events, usually triggered by the user selecting the Undo or Redo item from the Edit menu, have been moved from the Document to the Window. [3003] These events are important for all sorts of web applications (think Google Docs and then work your imagination outward).
r3004 adds support for the onbeforeprint and onafterprint events, which are supported in Microsoft Internet Explorer since version 5.
r3005 updates the global list of event handlers to include these new events, some video-related events, some storage-related events, and several others that have slipped through the cracks during the thrashing of these features.
Other interesting changes this week
- r3019: plugins (like Flash) release the storage mutex (i.e. the
document.cookielock mentioned in episode 28). - r3015 adds
.protocol,.host,.hostname,.port,.pathname,.search, and.hashproperties to<a>and<area>elements. - r3032: the default size of
<h1>elements depends on how deep it is nested within nested<section>elements. - r2988: if the document's last-modified is unknown,
document.lastModifiedshould return the current time. - r2981:
<time datetime="valid-datetime"></time>should display the datetime value in the user's timezone and locale. - r3054:
<input type=tel>
Around the web
- Ian Hickson has summarized the major use cases given for micro-data (RDFa, microformats, etc.) and plans to start addressing the use cases this week.
- Why JavaScript Will Save Offline Storage in HTML 5
- Switched
- W3Schools.com has added an HTML 5 reference section.
- Reminder: you can still help us review HTML 5! Your input is important!
Tune in next week for another exciting episode of "This Week in HTML 5."