Html5 box news the right mark up

HTML & CSS
1

Hi all
I’m starting using html5 right now so be patience :slight_smile:
I’m looking for a good way to mark up a box news
for a blog so I ended up to :


<article id="news_1" class="boxNews">
<header>
  <hgroup>
<a href="#" rel="bookmark" title="news title"><h1>test news</h1></a>
<h2>Author's name</h2>
<p>Published <time pubdate datetime="2012-03-01 09:38:02">March 1, 2012</time>.</p>
</hgroup>
</header>
<div>
  <figure>
    <img src="/res/upload/hint_test-news.jpg" alt="test news" title="test news" />
  </figure>
<p>content</p>
</div>
<footer>
  <--! Gallery -->
   <img alt="test-new-1" src="/res/upload/hint_test-new-1.jpg" title="test-new-1" />
   <img alt="test-new-2" src="/res/upload/hint_test-new-2.jpg" title="test-new-2" />
</footer>
</article>

Is it html5 compliance ?
Is there a better way ?

Bye

2

Why do you even need to use HTML5? There is nothing it provides over HTML4 that would warrnet you use it :).

I’d say scrap that and stick to HTML4.

Off Topic:

I’m saving you from a harsh telling from deathshadow60, so heed my warning :p)

3

Well… you already know my feelings about hgroup, but even then I think you’re still putting stuff in it that wasn’t meant…
<hgroup>
<a href=“#” rel=“bookmark” title=“news title”><h1>test news</h1></a>
<h2>Author’s name</h2>
<p>Published <time pubdate datetime=“2012-03-01 09:38:02”>March 1, 2012</time>.</p>
</hgroup>
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 :slight_smile:

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” :slight_smile: 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 :wink:

4

Even as HTML 5 it looks like you have multiple elements for nothing – there’s no reason to have a hgroup… I wonder if that image is even a figure, not sure what the div is even for… The ‘new’ nonsense of “you can now wrap a block level in a inline-level” – in your case the anchor wrapping the h1, is just asking for the page to break… if you’re not going to use figcaption I’m not certain that’s a figure… depending on what those footer images are I would question if they’re actually content that belongs in the markup in the first place… and there’s usually no good reason to be WASTING code on putting TITLE on a IMG tag.

But yeah, HTML 5 sucks – it’s still in draft, the loosening of the structural rules sets coding practice back a decade or more, and the pointless/redundant new structural tags are nothing more than pointless bloat.

That said, what’s your CONTENT? Without the actual content or a reasonable facsimile, it’s impossible to say what the proper markup is… Content dictates proper markup if you’re going to practice semantics, regardless of if it’s HTML 4 or 5.

5

Specifically, in IE (sometimes) and Firefox 3 (sometimes). I’m not sure if FF4+ fixed that but I think they did.

The anchor-wrapping-blocks is still handy if you have a bunch of blocks who all need to be clickable and go to the same address, since now you have just one link instead of 15 or whatever… however what you have with your h1, is going to be more stable and still work like you want if you do it the HTML4 way.
<h1><a href=“blah”>h1 text</a></h1>