[html5] Markup feedback: Articles on a "section front" page & a list of bloggers...

[Brian Tremblay]

On 6/10/12 5:24 PM, Micky Hulse wrote:
>
> "HTML5: Marking-up a list of bloggers."
> <https://gist.github.com/2907817>
>
> General feedback would be greatly appreciated. :)
>
> Specific questions:
>
> For example #2, is that the proper way to use the Person microdata (in
> the context of a list of bloggers).

First, your page header. You don't need <header> markup.

<section>

<hgroup>
<h1>Bloggers</h1>
<h2>Bloggers at site.com</h2>
</hgroup>

<!-- list of bloggers -->

The sub heading is redundant. All you need is "Bloggers at site.com", in 
which case you can use

<h1>Bloggers at site.com</h1>

and lose the <group> markup. Or add a real sub heading

<hgroup>
<h1>Bloggers at site.com</h1>
<h2>answering questions that weren't worth asking</h2> <!-- or some such 
thing -->
</hgroup>




Second, not sure about this:

<a href="#" itemprop="url">

What sort of url is that? If each blogger doesn't have her or his own 
page, how about a real fragment id?

<a href="#john-thompson" itemprop="url">




Third, your alt text is bogus. Alt text is a *replacement* for the 
image, not a description of it. Since the name appears in the page 
anyways, next to or below the image, the alt attribute should be empty: 
alt=""





Finally, if this is an html5 example (is it?), why not use some of the 
new, semantic, markup instead of the generic <div>?

<figure id="john-thompson" itemscope itemtype="http://schema.org/Person">

<a href="#john-thompson" itemprop="url">
<img src="john-thompson.jpg" alt="" itemprop="image">
<figcaption itemprop="name"><span itemprop="givenName">John</span> <span 
itemprop="familyName">Thompson</span></figcaption>
</a>

</figure>

Or perhaps:

<section id="john-thompson" itemscope itemtype="http://schema.org/Person">

<a href="#john-thompson" itemprop="url">
<img src="john-thompson.jpg" alt="" itemprop="image">
<h1 itemprop="name"><span itemprop="givenName">John</span> <span 
itemprop="familyName">Thompson</span></h1>
</a>

</section>

FWIW, I think figure is more appropriate here.




What is the point of this example, anyways?

-- 
Brian Tremblay