From mickyhulse.lists at gmail.com  Sun Jun 10 17:24:14 2012
From: mickyhulse.lists at gmail.com (Micky Hulse)
Date: Sun, 10 Jun 2012 17:24:14 -0700
Subject: [html5] Markup feedback: Articles on a "section front" page & a
	list of bloggers...
Message-ID: <CALri7MkJDqBorZSVhQS1cvSYu1Ohbn31oTsEsxpDp6rLuU_O4g@mail.gmail.com>

Pseudo code examples:

1.

"HTML5: Marking-up a list of "today's" stories for a mock "section front" page."
<https://gist.github.com/2907776>

... and:

2.

"HTML5: Marking-up a list of bloggers."
<https://gist.github.com/2907817>

General feedback would be greatly appreciated. :)

Specific questions:

For example #1, should I be using <header> anywhere?

For example #2, is that the proper way to use the Person microdata (in
the context of a list of bloggers).

Let me know if I can clarify my questions.

Many thanks in advance!

Cheers,
Micky

From webmaster at tsmchughs.com  Mon Jun 11 10:17:24 2012
From: webmaster at tsmchughs.com (Brian Tremblay)
Date: Mon, 11 Jun 2012 10:17:24 -0700
Subject: [html5] Markup feedback: Articles on a "section front" page & a
 list of bloggers...
In-Reply-To: <CALri7MkJDqBorZSVhQS1cvSYu1Ohbn31oTsEsxpDp6rLuU_O4g@mail.gmail.com>
References: <CALri7MkJDqBorZSVhQS1cvSYu1Ohbn31oTsEsxpDp6rLuU_O4g@mail.gmail.com>
Message-ID: <4FD62824.7000806@tsmchughs.com>

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

From mickyhulse.lists at gmail.com  Mon Jun 11 11:29:01 2012
From: mickyhulse.lists at gmail.com (Micky Hulse)
Date: Mon, 11 Jun 2012 11:29:01 -0700
Subject: [html5] Markup feedback: Articles on a "section front" page & a
 list of bloggers...
In-Reply-To: <4FD62824.7000806@tsmchughs.com>
References: <CALri7MkJDqBorZSVhQS1cvSYu1Ohbn31oTsEsxpDp6rLuU_O4g@mail.gmail.com>
	<4FD62824.7000806@tsmchughs.com>
Message-ID: <CALri7Mn3o0-hVyNBxnYc2S3U7J=Cnhup=vdJZwOnbVz74VT_hA@mail.gmail.com>

Hi Brian! Thank you so much for your reply, I really appreciate it. :)

Just to clarify, and sorry if I was not clear before, both of the
examples I posted are for "modules" that will appear in a much larger
page of various pieces of different types of content. :)

On Mon, Jun 11, 2012 at 10:17 AM, Brian Tremblay
<webmaster at tsmchughs.com> wrote:
> On 6/10/12 5:24 PM, Micky Hulse wrote:
>> "HTML5: Marking-up a list of bloggers."
>> <https://gist.github.com/2907817>
> First, your page header. You don't need <header> markup.
> The sub heading is redundant. All you need is "Bloggers at site.com", in
> which case you can use
> 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>

Thanks for tips!

Sorry about the redundant subheading. I should have made that more
clear... This is just a "pseudo" example, and I was trying to keep
things concise; I plan on including a more unique subheading for the
real thing; for this example I did not want to go into those types of
specifics. Sorry about the confusion. :(

> <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?

Hehe, again, sorry for the confusion. I plan on linking to the actual
blogger's blog index pages for the real thing... I was just trying to
keep my example free of clutter.

> 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=""

Oh, good point! I was wondering about that. That must be a bad habit of mine. :(

I plan on having portrait/mugshots of each blogger for the images;
just out of curiosity, let's say the name was not next to the image...
What would you suggest the ALT text be?

> Finally, if this is an html5 example (is it?), why not use some of the new,
> semantic, markup instead of the generic <div>?
> FWIW, I think figure is more appropriate here.

Awesome, thanks for tips!

You're totally right, a <figure> appears to work way better! Check out
the latest version:

<https://gist.github.com/2907817>

... for those interested in comparing, the old version is here:

<https://gist.github.com/2907817/e212ef7c170fd304e51a72a3d5c910604d0d5140>

Thanks for kicking me in the right direction! :)

> What is the point of this example, anyways?

Besides wanting to hone my HTML5 skills? :D

I'm in the process of building an HTML5/CSS3/adaptive site for the
company that I work for (a newspaper) and, before I start building the
HTML for the templates, I wanted to run some of my ideas past the
HTML5 gurus (like you).

I hope this list is the right place for these types of questions? I'm
not new to HTML, but I am new to HTML5 (relatively speaking)... If
anyone can recommend a better list for me to ask markup questions,
then I'll gladly go there instead of bothering ya'll. :)

Thanks again for your pro help Brian, I really appreciate it.

Have a nice day.

Cheers,
Micky

P.S. to the group:

I am still interested in feedback on this one:

"HTML5: Marking-up a list of "today's" stories for a mock "section front" page."
<https://gist.github.com/2907776>

... that's just mock/pseudo code, so sorry in advance if my attempts
at keep the code lean causes any confusion. Please let me know if I
can clarify anything.

From webmaster at tsmchughs.com  Mon Jun 11 12:07:28 2012
From: webmaster at tsmchughs.com (Brian Tremblay)
Date: Mon, 11 Jun 2012 12:07:28 -0700
Subject: [html5] Markup feedback: Articles on a "section front" page & a
 list of bloggers...
In-Reply-To: <CALri7Mn3o0-hVyNBxnYc2S3U7J=Cnhup=vdJZwOnbVz74VT_hA@mail.gmail.com>
References: <CALri7MkJDqBorZSVhQS1cvSYu1Ohbn31oTsEsxpDp6rLuU_O4g@mail.gmail.com>
	<4FD62824.7000806@tsmchughs.com>
	<CALri7Mn3o0-hVyNBxnYc2S3U7J=Cnhup=vdJZwOnbVz74VT_hA@mail.gmail.com>
Message-ID: <4FD641F0.6080802@tsmchughs.com>

> On Mon, Jun 11, 2012 at 10:17 AM, Brian Tremblay wrote:
>> On 6/10/12 5:24 PM, Micky Hulse wrote:
>>> "HTML5: Marking-up a list of bloggers."
>>> <https://gist.github.com/2907817>
>>
>> First, your page header. You don't need <header> markup. The sub
>> heading is redundant. All you need is "Bloggers at site.com", in
>> which case you can lose the <hgroup> markup.
>
> This is just a "pseudo" example, and I was trying to keep things
> concise; I plan on including a more unique subheading for the real
> thing; for this example I did not want to go into those types of
> specifics. Sorry about the confusion. :(

I'm not confused. But if this is intended for others to use or learn
from, it is quite likely that *they* will be confused (unless they
already know better). Be as concise as possible, but no more.

>> <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?
>
> Hehe, again, sorry for the confusion. I plan on linking to the actual
> blogger's blog index pages for the real thing... I was just trying to
> keep my example free of clutter.

A real looking url is not clutter. A fake looking url is confusing.

>> 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=""
>
> Oh, good point! I was wondering about that. That must be a bad habit
> of mine. :(

The alt attribute of the img element is pretty old. You'll want to
master that before tackling new html5 elements, no?

> I plan on having portrait/mugshots of each blogger for the images;
> just out of curiosity, let's say the name was not next to the
> image... What would you suggest the ALT text be?

The name (and not "portrait of..."). So John Doe, and not "portrait of
John Doe".

-- 
Brian Tremblay

From mickyhulse.lists at gmail.com  Mon Jun 11 12:14:41 2012
From: mickyhulse.lists at gmail.com (Micky Hulse)
Date: Mon, 11 Jun 2012 12:14:41 -0700
Subject: [html5] Markup feedback: Articles on a "section front" page & a
 list of bloggers...
In-Reply-To: <4FD641F0.6080802@tsmchughs.com>
References: <CALri7MkJDqBorZSVhQS1cvSYu1Ohbn31oTsEsxpDp6rLuU_O4g@mail.gmail.com>
	<4FD62824.7000806@tsmchughs.com>
	<CALri7Mn3o0-hVyNBxnYc2S3U7J=Cnhup=vdJZwOnbVz74VT_hA@mail.gmail.com>
	<4FD641F0.6080802@tsmchughs.com>
Message-ID: <CALri7M=d-oWGL4+kDukJt9-G1QyUkz5fBkunpV-YijxW0XjkLA@mail.gmail.com>

On Mon, Jun 11, 2012 at 11:48 AM, Brian Tremblay
<webmaster at tsmchughs.com> wrote:
> I'm not confused. But if this is intended for others to use or learn from,
> it is quite likely that *they* will be confused (unless they already know
> better). Be as concise as possible, but no more.

Good tip!

> A real looking url is not clutter. A fake looking url is confusing.

Point taken.

> The alt attribute of the img element is pretty old. You'll want to master
> that before tackling new html5 elements, no?

Hehe, too true. :)

> The name (and not "portrait of..."). So John Doe, and not "portrait of John
> Doe".

Thanks!

Have a good day.

Cheers,
Micky

From ian at hixie.ch  Mon Jun 11 16:23:56 2012
From: ian at hixie.ch (Ian Hickson)
Date: Mon, 11 Jun 2012 23:23:56 +0000 (UTC)
Subject: [html5] Help Digest, Vol 56, Issue 4
In-Reply-To: <CAEWRoff=SowQiY0oWz1bOrKqUDb8iEsgVzNpO+autG4vMMw6Vg@mail.gmail.com>
References: <mailman.1.1334516544.22168.help-whatwg.org@lists.whatwg.org>
	<CAEWRoff=SowQiY0oWz1bOrKqUDb8iEsgVzNpO+autG4vMMw6Vg@mail.gmail.com>
Message-ID: <Pine.LNX.4.64.1206112314550.378@ps20323.dreamhostps.com>

On Mon, 16 Apr 2012, Laurence Gillian wrote:
> 
> This markup works...
> 
> <table>
>  <thead>
>   <tr>
>    <th>name</th><th>allowed cups</th><th>cups drunk</th>
>   </tr>
>  </thead>
>  <tbody>
>  <!-- Top Containing Node(s) -->
>   <tr>
>    <th>Security</th><td>12</td><td>10</td>
>   </tr>
>   <!-- These are children of security -->
>   <tr>
>    <th>Chief</th><td>8</td><td>2</td>
>   </tr>
>   <tr>
>    <th>Workers</th><td>4</td><td>8</td>
>   </tr>
>     <!-- And John could also have children too -->
>     <tr>
>      <th>John</th><td>2</td><td>4</td>
>     </tr>
>     <tr>
>      <th>Terry</th><td>2</td><td>4</td>
>     </tr>
> 
> </tbody>
> </table>
> 
> But the structure doesn't represent the relationships in the data.

I recommend looking at the example in this section:
http://www.whatwg.org/specs/web-apps/current-work/#the-th-element

...and the third example in this section:
http://www.whatwg.org/specs/web-apps/current-work/#examples-0

The latter in particular shows what the markup in your case might look 
like. The indentation is done from CSS, using a rule like this:

   .apple-table-examples.e2 th[scope=row] { padding-left: 1em; }

HTH, and sorry for the delay,
-- 
Ian Hickson               U+1047E                )\._.,--....,'``.    fL
http://ln.hixie.ch/       U+263A                /,   _.. \   _\  ;`._ ,.
Things that are impossible just take longer.   `._.-(,_..'--(,_..'`-.;.'

From mickyhulse.lists at gmail.com  Sun Jun 10 17:24:14 2012
From: mickyhulse.lists at gmail.com (Micky Hulse)
Date: Sun, 10 Jun 2012 17:24:14 -0700
Subject: [html5] Markup feedback: Articles on a "section front" page & a
	list of bloggers...
Message-ID: <CALri7MkJDqBorZSVhQS1cvSYu1Ohbn31oTsEsxpDp6rLuU_O4g@mail.gmail.com>

Pseudo code examples:

1.

"HTML5: Marking-up a list of "today's" stories for a mock "section front" page."
<https://gist.github.com/2907776>

... and:

2.

"HTML5: Marking-up a list of bloggers."
<https://gist.github.com/2907817>

General feedback would be greatly appreciated. :)

Specific questions:

For example #1, should I be using <header> anywhere?

For example #2, is that the proper way to use the Person microdata (in
the context of a list of bloggers).

Let me know if I can clarify my questions.

Many thanks in advance!

Cheers,
Micky


From webmaster at tsmchughs.com  Mon Jun 11 10:17:24 2012
From: webmaster at tsmchughs.com (Brian Tremblay)
Date: Mon, 11 Jun 2012 10:17:24 -0700
Subject: [html5] Markup feedback: Articles on a "section front" page & a
 list of bloggers...
In-Reply-To: <CALri7MkJDqBorZSVhQS1cvSYu1Ohbn31oTsEsxpDp6rLuU_O4g@mail.gmail.com>
References: <CALri7MkJDqBorZSVhQS1cvSYu1Ohbn31oTsEsxpDp6rLuU_O4g@mail.gmail.com>
Message-ID: <4FD62824.7000806@tsmchughs.com>

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


From mickyhulse.lists at gmail.com  Mon Jun 11 11:29:01 2012
From: mickyhulse.lists at gmail.com (Micky Hulse)
Date: Mon, 11 Jun 2012 11:29:01 -0700
Subject: [html5] Markup feedback: Articles on a "section front" page & a
 list of bloggers...
In-Reply-To: <4FD62824.7000806@tsmchughs.com>
References: <CALri7MkJDqBorZSVhQS1cvSYu1Ohbn31oTsEsxpDp6rLuU_O4g@mail.gmail.com>
	<4FD62824.7000806@tsmchughs.com>
Message-ID: <CALri7Mn3o0-hVyNBxnYc2S3U7J=Cnhup=vdJZwOnbVz74VT_hA@mail.gmail.com>

Hi Brian! Thank you so much for your reply, I really appreciate it. :)

Just to clarify, and sorry if I was not clear before, both of the
examples I posted are for "modules" that will appear in a much larger
page of various pieces of different types of content. :)

On Mon, Jun 11, 2012 at 10:17 AM, Brian Tremblay
<webmaster at tsmchughs.com> wrote:
> On 6/10/12 5:24 PM, Micky Hulse wrote:
>> "HTML5: Marking-up a list of bloggers."
>> <https://gist.github.com/2907817>
> First, your page header. You don't need <header> markup.
> The sub heading is redundant. All you need is "Bloggers at site.com", in
> which case you can use
> 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>

Thanks for tips!

Sorry about the redundant subheading. I should have made that more
clear... This is just a "pseudo" example, and I was trying to keep
things concise; I plan on including a more unique subheading for the
real thing; for this example I did not want to go into those types of
specifics. Sorry about the confusion. :(

> <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?

Hehe, again, sorry for the confusion. I plan on linking to the actual
blogger's blog index pages for the real thing... I was just trying to
keep my example free of clutter.

> 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=""

Oh, good point! I was wondering about that. That must be a bad habit of mine. :(

I plan on having portrait/mugshots of each blogger for the images;
just out of curiosity, let's say the name was not next to the image...
What would you suggest the ALT text be?

> Finally, if this is an html5 example (is it?), why not use some of the new,
> semantic, markup instead of the generic <div>?
> FWIW, I think figure is more appropriate here.

Awesome, thanks for tips!

You're totally right, a <figure> appears to work way better! Check out
the latest version:

<https://gist.github.com/2907817>

... for those interested in comparing, the old version is here:

<https://gist.github.com/2907817/e212ef7c170fd304e51a72a3d5c910604d0d5140>

Thanks for kicking me in the right direction! :)

> What is the point of this example, anyways?

Besides wanting to hone my HTML5 skills? :D

I'm in the process of building an HTML5/CSS3/adaptive site for the
company that I work for (a newspaper) and, before I start building the
HTML for the templates, I wanted to run some of my ideas past the
HTML5 gurus (like you).

I hope this list is the right place for these types of questions? I'm
not new to HTML, but I am new to HTML5 (relatively speaking)... If
anyone can recommend a better list for me to ask markup questions,
then I'll gladly go there instead of bothering ya'll. :)

Thanks again for your pro help Brian, I really appreciate it.

Have a nice day.

Cheers,
Micky

P.S. to the group:

I am still interested in feedback on this one:

"HTML5: Marking-up a list of "today's" stories for a mock "section front" page."
<https://gist.github.com/2907776>

... that's just mock/pseudo code, so sorry in advance if my attempts
at keep the code lean causes any confusion. Please let me know if I
can clarify anything.


From webmaster at tsmchughs.com  Mon Jun 11 12:07:28 2012
From: webmaster at tsmchughs.com (Brian Tremblay)
Date: Mon, 11 Jun 2012 12:07:28 -0700
Subject: [html5] Markup feedback: Articles on a "section front" page & a
 list of bloggers...
In-Reply-To: <CALri7Mn3o0-hVyNBxnYc2S3U7J=Cnhup=vdJZwOnbVz74VT_hA@mail.gmail.com>
References: <CALri7MkJDqBorZSVhQS1cvSYu1Ohbn31oTsEsxpDp6rLuU_O4g@mail.gmail.com>
	<4FD62824.7000806@tsmchughs.com>
	<CALri7Mn3o0-hVyNBxnYc2S3U7J=Cnhup=vdJZwOnbVz74VT_hA@mail.gmail.com>
Message-ID: <4FD641F0.6080802@tsmchughs.com>

> On Mon, Jun 11, 2012 at 10:17 AM, Brian Tremblay wrote:
>> On 6/10/12 5:24 PM, Micky Hulse wrote:
>>> "HTML5: Marking-up a list of bloggers."
>>> <https://gist.github.com/2907817>
>>
>> First, your page header. You don't need <header> markup. The sub
>> heading is redundant. All you need is "Bloggers at site.com", in
>> which case you can lose the <hgroup> markup.
>
> This is just a "pseudo" example, and I was trying to keep things
> concise; I plan on including a more unique subheading for the real
> thing; for this example I did not want to go into those types of
> specifics. Sorry about the confusion. :(

I'm not confused. But if this is intended for others to use or learn
from, it is quite likely that *they* will be confused (unless they
already know better). Be as concise as possible, but no more.

>> <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?
>
> Hehe, again, sorry for the confusion. I plan on linking to the actual
> blogger's blog index pages for the real thing... I was just trying to
> keep my example free of clutter.

A real looking url is not clutter. A fake looking url is confusing.

>> 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=""
>
> Oh, good point! I was wondering about that. That must be a bad habit
> of mine. :(

The alt attribute of the img element is pretty old. You'll want to
master that before tackling new html5 elements, no?

> I plan on having portrait/mugshots of each blogger for the images;
> just out of curiosity, let's say the name was not next to the
> image... What would you suggest the ALT text be?

The name (and not "portrait of..."). So John Doe, and not "portrait of
John Doe".

-- 
Brian Tremblay


From mickyhulse.lists at gmail.com  Mon Jun 11 12:14:41 2012
From: mickyhulse.lists at gmail.com (Micky Hulse)
Date: Mon, 11 Jun 2012 12:14:41 -0700
Subject: [html5] Markup feedback: Articles on a "section front" page & a
 list of bloggers...
In-Reply-To: <4FD641F0.6080802@tsmchughs.com>
References: <CALri7MkJDqBorZSVhQS1cvSYu1Ohbn31oTsEsxpDp6rLuU_O4g@mail.gmail.com>
	<4FD62824.7000806@tsmchughs.com>
	<CALri7Mn3o0-hVyNBxnYc2S3U7J=Cnhup=vdJZwOnbVz74VT_hA@mail.gmail.com>
	<4FD641F0.6080802@tsmchughs.com>
Message-ID: <CALri7M=d-oWGL4+kDukJt9-G1QyUkz5fBkunpV-YijxW0XjkLA@mail.gmail.com>

On Mon, Jun 11, 2012 at 11:48 AM, Brian Tremblay
<webmaster at tsmchughs.com> wrote:
> I'm not confused. But if this is intended for others to use or learn from,
> it is quite likely that *they* will be confused (unless they already know
> better). Be as concise as possible, but no more.

Good tip!

> A real looking url is not clutter. A fake looking url is confusing.

Point taken.

> The alt attribute of the img element is pretty old. You'll want to master
> that before tackling new html5 elements, no?

Hehe, too true. :)

> The name (and not "portrait of..."). So John Doe, and not "portrait of John
> Doe".

Thanks!

Have a good day.

Cheers,
Micky


From ian at hixie.ch  Mon Jun 11 16:23:56 2012
From: ian at hixie.ch (Ian Hickson)
Date: Mon, 11 Jun 2012 23:23:56 +0000 (UTC)
Subject: [html5] Help Digest, Vol 56, Issue 4
In-Reply-To: <CAEWRoff=SowQiY0oWz1bOrKqUDb8iEsgVzNpO+autG4vMMw6Vg@mail.gmail.com>
References: <mailman.1.1334516544.22168.help-whatwg.org@lists.whatwg.org>
	<CAEWRoff=SowQiY0oWz1bOrKqUDb8iEsgVzNpO+autG4vMMw6Vg@mail.gmail.com>
Message-ID: <Pine.LNX.4.64.1206112314550.378@ps20323.dreamhostps.com>

On Mon, 16 Apr 2012, Laurence Gillian wrote:
> 
> This markup works...
> 
> <table>
>  <thead>
>   <tr>
>    <th>name</th><th>allowed cups</th><th>cups drunk</th>
>   </tr>
>  </thead>
>  <tbody>
>  <!-- Top Containing Node(s) -->
>   <tr>
>    <th>Security</th><td>12</td><td>10</td>
>   </tr>
>   <!-- These are children of security -->
>   <tr>
>    <th>Chief</th><td>8</td><td>2</td>
>   </tr>
>   <tr>
>    <th>Workers</th><td>4</td><td>8</td>
>   </tr>
>     <!-- And John could also have children too -->
>     <tr>
>      <th>John</th><td>2</td><td>4</td>
>     </tr>
>     <tr>
>      <th>Terry</th><td>2</td><td>4</td>
>     </tr>
> 
> </tbody>
> </table>
> 
> But the structure doesn't represent the relationships in the data.

I recommend looking at the example in this section:
http://www.whatwg.org/specs/web-apps/current-work/#the-th-element

...and the third example in this section:
http://www.whatwg.org/specs/web-apps/current-work/#examples-0

The latter in particular shows what the markup in your case might look 
like. The indentation is done from CSS, using a rule like this:

   .apple-table-examples.e2 th[scope=row] { padding-left: 1em; }

HTH, and sorry for the delay,
-- 
Ian Hickson               U+1047E                )\._.,--....,'``.    fL
http://ln.hixie.ch/       U+263A                /,   _.. \   _\  ;`._ ,.
Things that are impossible just take longer.   `._.-(,_..'--(,_..'`-.;.'


From mickyhulse.lists at gmail.com  Sun Jun 10 17:24:14 2012
From: mickyhulse.lists at gmail.com (Micky Hulse)
Date: Sun, 10 Jun 2012 17:24:14 -0700
Subject: [html5] Markup feedback: Articles on a "section front" page & a
	list of bloggers...
Message-ID: <CALri7MkJDqBorZSVhQS1cvSYu1Ohbn31oTsEsxpDp6rLuU_O4g@mail.gmail.com>

Pseudo code examples:

1.

"HTML5: Marking-up a list of "today's" stories for a mock "section front" page."
<https://gist.github.com/2907776>

... and:

2.

"HTML5: Marking-up a list of bloggers."
<https://gist.github.com/2907817>

General feedback would be greatly appreciated. :)

Specific questions:

For example #1, should I be using <header> anywhere?

For example #2, is that the proper way to use the Person microdata (in
the context of a list of bloggers).

Let me know if I can clarify my questions.

Many thanks in advance!

Cheers,
Micky


From webmaster at tsmchughs.com  Mon Jun 11 10:17:24 2012
From: webmaster at tsmchughs.com (Brian Tremblay)
Date: Mon, 11 Jun 2012 10:17:24 -0700
Subject: [html5] Markup feedback: Articles on a "section front" page & a
 list of bloggers...
In-Reply-To: <CALri7MkJDqBorZSVhQS1cvSYu1Ohbn31oTsEsxpDp6rLuU_O4g@mail.gmail.com>
References: <CALri7MkJDqBorZSVhQS1cvSYu1Ohbn31oTsEsxpDp6rLuU_O4g@mail.gmail.com>
Message-ID: <4FD62824.7000806@tsmchughs.com>

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


From mickyhulse.lists at gmail.com  Mon Jun 11 11:29:01 2012
From: mickyhulse.lists at gmail.com (Micky Hulse)
Date: Mon, 11 Jun 2012 11:29:01 -0700
Subject: [html5] Markup feedback: Articles on a "section front" page & a
 list of bloggers...
In-Reply-To: <4FD62824.7000806@tsmchughs.com>
References: <CALri7MkJDqBorZSVhQS1cvSYu1Ohbn31oTsEsxpDp6rLuU_O4g@mail.gmail.com>
	<4FD62824.7000806@tsmchughs.com>
Message-ID: <CALri7Mn3o0-hVyNBxnYc2S3U7J=Cnhup=vdJZwOnbVz74VT_hA@mail.gmail.com>

Hi Brian! Thank you so much for your reply, I really appreciate it. :)

Just to clarify, and sorry if I was not clear before, both of the
examples I posted are for "modules" that will appear in a much larger
page of various pieces of different types of content. :)

On Mon, Jun 11, 2012 at 10:17 AM, Brian Tremblay
<webmaster at tsmchughs.com> wrote:
> On 6/10/12 5:24 PM, Micky Hulse wrote:
>> "HTML5: Marking-up a list of bloggers."
>> <https://gist.github.com/2907817>
> First, your page header. You don't need <header> markup.
> The sub heading is redundant. All you need is "Bloggers at site.com", in
> which case you can use
> 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>

Thanks for tips!

Sorry about the redundant subheading. I should have made that more
clear... This is just a "pseudo" example, and I was trying to keep
things concise; I plan on including a more unique subheading for the
real thing; for this example I did not want to go into those types of
specifics. Sorry about the confusion. :(

> <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?

Hehe, again, sorry for the confusion. I plan on linking to the actual
blogger's blog index pages for the real thing... I was just trying to
keep my example free of clutter.

> 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=""

Oh, good point! I was wondering about that. That must be a bad habit of mine. :(

I plan on having portrait/mugshots of each blogger for the images;
just out of curiosity, let's say the name was not next to the image...
What would you suggest the ALT text be?

> Finally, if this is an html5 example (is it?), why not use some of the new,
> semantic, markup instead of the generic <div>?
> FWIW, I think figure is more appropriate here.

Awesome, thanks for tips!

You're totally right, a <figure> appears to work way better! Check out
the latest version:

<https://gist.github.com/2907817>

... for those interested in comparing, the old version is here:

<https://gist.github.com/2907817/e212ef7c170fd304e51a72a3d5c910604d0d5140>

Thanks for kicking me in the right direction! :)

> What is the point of this example, anyways?

Besides wanting to hone my HTML5 skills? :D

I'm in the process of building an HTML5/CSS3/adaptive site for the
company that I work for (a newspaper) and, before I start building the
HTML for the templates, I wanted to run some of my ideas past the
HTML5 gurus (like you).

I hope this list is the right place for these types of questions? I'm
not new to HTML, but I am new to HTML5 (relatively speaking)... If
anyone can recommend a better list for me to ask markup questions,
then I'll gladly go there instead of bothering ya'll. :)

Thanks again for your pro help Brian, I really appreciate it.

Have a nice day.

Cheers,
Micky

P.S. to the group:

I am still interested in feedback on this one:

"HTML5: Marking-up a list of "today's" stories for a mock "section front" page."
<https://gist.github.com/2907776>

... that's just mock/pseudo code, so sorry in advance if my attempts
at keep the code lean causes any confusion. Please let me know if I
can clarify anything.


From webmaster at tsmchughs.com  Mon Jun 11 12:07:28 2012
From: webmaster at tsmchughs.com (Brian Tremblay)
Date: Mon, 11 Jun 2012 12:07:28 -0700
Subject: [html5] Markup feedback: Articles on a "section front" page & a
 list of bloggers...
In-Reply-To: <CALri7Mn3o0-hVyNBxnYc2S3U7J=Cnhup=vdJZwOnbVz74VT_hA@mail.gmail.com>
References: <CALri7MkJDqBorZSVhQS1cvSYu1Ohbn31oTsEsxpDp6rLuU_O4g@mail.gmail.com>
	<4FD62824.7000806@tsmchughs.com>
	<CALri7Mn3o0-hVyNBxnYc2S3U7J=Cnhup=vdJZwOnbVz74VT_hA@mail.gmail.com>
Message-ID: <4FD641F0.6080802@tsmchughs.com>

> On Mon, Jun 11, 2012 at 10:17 AM, Brian Tremblay wrote:
>> On 6/10/12 5:24 PM, Micky Hulse wrote:
>>> "HTML5: Marking-up a list of bloggers."
>>> <https://gist.github.com/2907817>
>>
>> First, your page header. You don't need <header> markup. The sub
>> heading is redundant. All you need is "Bloggers at site.com", in
>> which case you can lose the <hgroup> markup.
>
> This is just a "pseudo" example, and I was trying to keep things
> concise; I plan on including a more unique subheading for the real
> thing; for this example I did not want to go into those types of
> specifics. Sorry about the confusion. :(

I'm not confused. But if this is intended for others to use or learn
from, it is quite likely that *they* will be confused (unless they
already know better). Be as concise as possible, but no more.

>> <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?
>
> Hehe, again, sorry for the confusion. I plan on linking to the actual
> blogger's blog index pages for the real thing... I was just trying to
> keep my example free of clutter.

A real looking url is not clutter. A fake looking url is confusing.

>> 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=""
>
> Oh, good point! I was wondering about that. That must be a bad habit
> of mine. :(

The alt attribute of the img element is pretty old. You'll want to
master that before tackling new html5 elements, no?

> I plan on having portrait/mugshots of each blogger for the images;
> just out of curiosity, let's say the name was not next to the
> image... What would you suggest the ALT text be?

The name (and not "portrait of..."). So John Doe, and not "portrait of
John Doe".

-- 
Brian Tremblay


From mickyhulse.lists at gmail.com  Mon Jun 11 12:14:41 2012
From: mickyhulse.lists at gmail.com (Micky Hulse)
Date: Mon, 11 Jun 2012 12:14:41 -0700
Subject: [html5] Markup feedback: Articles on a "section front" page & a
 list of bloggers...
In-Reply-To: <4FD641F0.6080802@tsmchughs.com>
References: <CALri7MkJDqBorZSVhQS1cvSYu1Ohbn31oTsEsxpDp6rLuU_O4g@mail.gmail.com>
	<4FD62824.7000806@tsmchughs.com>
	<CALri7Mn3o0-hVyNBxnYc2S3U7J=Cnhup=vdJZwOnbVz74VT_hA@mail.gmail.com>
	<4FD641F0.6080802@tsmchughs.com>
Message-ID: <CALri7M=d-oWGL4+kDukJt9-G1QyUkz5fBkunpV-YijxW0XjkLA@mail.gmail.com>

On Mon, Jun 11, 2012 at 11:48 AM, Brian Tremblay
<webmaster at tsmchughs.com> wrote:
> I'm not confused. But if this is intended for others to use or learn from,
> it is quite likely that *they* will be confused (unless they already know
> better). Be as concise as possible, but no more.

Good tip!

> A real looking url is not clutter. A fake looking url is confusing.

Point taken.

> The alt attribute of the img element is pretty old. You'll want to master
> that before tackling new html5 elements, no?

Hehe, too true. :)

> The name (and not "portrait of..."). So John Doe, and not "portrait of John
> Doe".

Thanks!

Have a good day.

Cheers,
Micky


From ian at hixie.ch  Mon Jun 11 16:23:56 2012
From: ian at hixie.ch (Ian Hickson)
Date: Mon, 11 Jun 2012 23:23:56 +0000 (UTC)
Subject: [html5] Help Digest, Vol 56, Issue 4
In-Reply-To: <CAEWRoff=SowQiY0oWz1bOrKqUDb8iEsgVzNpO+autG4vMMw6Vg@mail.gmail.com>
References: <mailman.1.1334516544.22168.help-whatwg.org@lists.whatwg.org>
	<CAEWRoff=SowQiY0oWz1bOrKqUDb8iEsgVzNpO+autG4vMMw6Vg@mail.gmail.com>
Message-ID: <Pine.LNX.4.64.1206112314550.378@ps20323.dreamhostps.com>

On Mon, 16 Apr 2012, Laurence Gillian wrote:
> 
> This markup works...
> 
> <table>
>  <thead>
>   <tr>
>    <th>name</th><th>allowed cups</th><th>cups drunk</th>
>   </tr>
>  </thead>
>  <tbody>
>  <!-- Top Containing Node(s) -->
>   <tr>
>    <th>Security</th><td>12</td><td>10</td>
>   </tr>
>   <!-- These are children of security -->
>   <tr>
>    <th>Chief</th><td>8</td><td>2</td>
>   </tr>
>   <tr>
>    <th>Workers</th><td>4</td><td>8</td>
>   </tr>
>     <!-- And John could also have children too -->
>     <tr>
>      <th>John</th><td>2</td><td>4</td>
>     </tr>
>     <tr>
>      <th>Terry</th><td>2</td><td>4</td>
>     </tr>
> 
> </tbody>
> </table>
> 
> But the structure doesn't represent the relationships in the data.

I recommend looking at the example in this section:
http://www.whatwg.org/specs/web-apps/current-work/#the-th-element

...and the third example in this section:
http://www.whatwg.org/specs/web-apps/current-work/#examples-0

The latter in particular shows what the markup in your case might look 
like. The indentation is done from CSS, using a rule like this:

   .apple-table-examples.e2 th[scope=row] { padding-left: 1em; }

HTH, and sorry for the delay,
-- 
Ian Hickson               U+1047E                )\._.,--....,'``.    fL
http://ln.hixie.ch/       U+263A                /,   _.. \   _\  ;`._ ,.
Things that are impossible just take longer.   `._.-(,_..'--(,_..'`-.;.'