Using header and hgroup in HTML5

When I’m reviewing and commenting on submissions for HTML5 Gallery, I come across a number of common mistakes one of which covers the use (and mis-use!) of the header and hgroup elements.


When I’m reviewing and commenting on submissions for HTML5 Gallery, I come across a number of common mistakes one of which covers the use (and mis-use!) of the header and hgroup elements.

So, that’s it. Three months after starting from scratch, the final chapter and introduction have been reviewed and sent off to production.
Of course the production material still needs to be reviewed, but as for new material, I’m done.

A few weeks back, fellow HTML5 Gallery curator Derek Johnson tweeted the following:
Re-reading the spec and can’t see why some people say nav is only for links within the same site.
As one of the “people” Derek referred to, I was suddenly hit with doubt. So I headed over to the HTML5 specifcation and sure enough there’s no actual mention that the nav element is only to contain links whose target is within the same site.
How odd I thought.

Yes. It’s true. I’m writing a book! Somehow I have become a technical author. Well I know how it’s come about, but it still seems rather surreal.
The topic is HTML5 Multimedia, and it’s part of the new Design and Develop series by Peachpit, and in it I shall be talking about all things related to multimedia and HTML5.

With the web industry embracing HTML5′s ability to embed video in the browser, we need to take a further look at what the future holds for video and HTML5, particularly in the field of accessibility.
It’s all very well to embed audio and video into your website, but how accessible are these? Simply adding a video is fine for those who don’t need any help in viewing it, but for those who might need to read what’s being said or have something read it out to them (to take one particular example) it’s not so useful.

I have seen many tutorials on the web for CSS3 buttons, but not so much on what I’m going to briefly mention today, and that is CSS3 input fields.
Many website designs that I work with contain rounded cornered input fields, which normally meant using a background image from the design to achieve the required look. With CSS3 rounded corners and box shadows, this doesn’t necessarily need to be the case (although in some cases it still will be – depending on the complexity of the design!).