Well… you already know my feelings about hgroup, but even then I think you’re still putting stuff in it that wasn’t meant…
<a href=“#” rel=“bookmark” title=“news title”><h1>test news</h1></a>
<p>Published <time pubdate datetime=“2012-03-01 09:38:02”>March 1, 2012</time>.</p>
The p isn’t a heading element so haul it out of hgroup and leave it nested in the header tag.
Not that I see the author’s name as being any kind of heading element. It’s just meta data. And possibly might also need to be clickable (more articles by this author). So actually I wouldn’t use hgroup, but you knew I was going there
Similarly the figure tags are just wasted bytes. What does that mean? Isn’t <img> already telling users and user agents what they need to know? What does <figure> add? (I can see it being useful with a figcaption, but otherwise? Naw).
The footer gallery is very unclear. What makes that data “footer”-y? Knowing that footers tend to be more meta-data (and often in articles, a footer may be more common coming right after the header rather than after the content), is that image gallery meta-data about the article? Or is it thumbnail links to other articles? If it’s a gallery that belongs to the article itself, I wouldn’t make it footer. It’s main content. Though, if you look here you’ll see a grey stripe under the little article… linking to the photos (7 Foto’s). A link could be meta-data about the article I suppose, but if you’re showing actual thumbs I wouldn’t.
Lastly titles on images are almost evil. Why?
If the information is important, allow everyone to enjoy that knowledge, by using a caption. Titles are (generally) only supported by mice. Here, you’re saying “if you’re lucky enough to have a mouse, you get more info, yay!”. To me that doesn’t count as “progressive enhancement” Plus it’s a bit annoying to have a tooltip cover up stuff next to the mouse.
But captions are fugly and take up space! A neat CSS trick to get around that (assuming these are thumbs that link, therefore surrounded by anchors) is to hide the text underneath the image, and on :hover OR :focus (or :active) have that text move down underneath the image (become visible). It’s kind of a nice little setup, though it does mean it’s a little bit mystery-meat: users have to discover for themselves that there is more info… then again, same with titles anyway.
So, is it HTML5 compliant? I believe how you are using hgroup and footer is likely not compliant. Hgroup really is meant to group heading tags only, not everything in a <header>. Footer, depends on what those images are representing. <figure> is probably okay as far as HTML5 goes, I just think it’s silly bloat at this point