[html5] <header>, <hgroup> and subheadings

Fri May 3 16:01:01 PDT 2013

On Fri, May 3, 2013 at 2:39 PM, Ian Hickson <ian at hixie.ch> wrote:
> On Wed, 1 May 2013, Micky Hulse wrote:
>> Example #1:
>> <doctype html>
>> <title>Hello, world!</title>
>> <h1>This is a section</h1>
>> <article>
>>     <heading>
>>         <hgroup>
>>             <h1>Primary heading</h1>
>>             <h2>Secondary heading</h2>
>>             <h3>Tertiary heading</h3>
>>         </hgroup>
>>     </heading>
>> </article>
>  ... The actual outline there is:
>  1. This is a section
>      1. Primary heading - Secondary heading - Tertiary heading

Ah, that's great to know! Thanks for the clarification. :)

> (Note that <heading> is wrong, it's <header> you probably want.)

DOH! Agh! I definitely feel stupid for missing that! I hate to admit
it, but I always get those two terms mixed up when writing that tag.
Anyway, thanks for the correction! :)

>> Which is better in terms of showing a subheading?
> If by "subheading" you mean that it's a section's heading but it has two
> levels, the way many books these days are marked up, then it's <hgroup>.
> If by subheading you mean the heading of a subsection, then you want two
> different <section> elements, basically.

Interesting. Thanks for the clarification. That makes a lot of sense.

My industry is Newspapers, and <hgroup> fits my particular situation.
To clarify, this is for a newspaper article where we have a "Label",
"Headline" and a "Deck" (in that order); where the headline is the
most important, deck is second most important and the label is of
least importance but they are all related to one particular article.

> No need, it's still valid.

That's good to know! Thanks for confirming. :)

>> So, how does one handle a subheading that is supposed to appear above a
>> main heading? I don't always want my <h1> to be the first in the flow
>> due to importance of the heading, right?
> Yeah. The <h1> is the main heading, the other <hx> elements are
> subheadings.

Coooool! Also good to know! Thank you.

>> Not using an <hgroup>:
>> <doctype html>
>> <title>Hello, world!</title>
>> <h1>This is a section</h1>
>> <article>
>>    <heading>
>>        <h3>Tertiary heading</h3>
>>        <h1>Primary heading</h1>
>>        <h2>Secondary heading</h2>
>>    </heading>
>> </article>
> This is equivalent to:
>   <body>
>     <h1>This is a section</h1>
>     <article>
>       <h1>Tertiary heading</h1>
>     </article>
>     <article>
>       <h1>Primary heading</h1>
>       <section>
>         <h2>Secondary heading</h2>
>       </section>
>     </article>
>   </body>

Whoa! Really? I would have never guessed that's how it translates. Amazing.

Just out of curiosity, how did you come up with that translation? I'd
love to know of the tool or technique that could help me translate
HTML5 markup into the example you provide above. :)

> That's probably what you want, right (assuming it's just the heading of
> the <article>). The outline tool just doesn't show the full heading of the
> <hgroup>.

That's definitely what I'd prefer to do.

> On Thu, 2 May 2013, Jukka K. Korpela wrote:
>> <h2>The basic heading<br>
>> <small>The explanatory or more detailed "sub-heading"</small></h2>
>> [...]
>> <h2>The basic heading
>> <span class=subheading>The explanatory or more detailed
>> "sub-heading"</span></h2>
> You could do those, but <hgroup> is intended to make these unnecessary.

Thanks for the help Ian (and Jukka) I really appreciate it! You guys rock! :)

Have a nice day.

Cheers,
Micky