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
accesskey
attribute - (Re)introducing the
window.setTimeout
andwindow.setInterval
functions - 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
accesskey
attribute - using the
accesskey
attribute 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.setTimeout
andwindow.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
error
events 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.cookie
lock mentioned in episode 28). - r3015 adds
.protocol
,.host
,.hostname
,.port
,.pathname
,.search
, and.hash
properties 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.lastModified
should 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."