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

Fri May 3 14:39:03 PDT 2013

On Wed, 1 May 2013, Micky Hulse wrote:
> 
> Using the outliner (ya'll probably know this link by heart):
> 
> <http://gsnedders.html5.org/outliner/>
>
> 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>
> 
> ... creates this outline:
> 
> 1. This is a section
>     1. Primary heading

The outliner is unfortunately not showing the secondary and teriatry 
headings, but that's just an issue with in the outliner. The actual 
outline there is:

 1. This is a section
     1. Primary heading - Secondary heading - Tertiary heading

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

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

On Wed, 1 May 2013, Micky Hulse wrote:
>
> Hmm, just read that the <hgroup> has been removed from the spec:

It was removed from the W3C spec, but it's still in the HTML standard.

> I guess I'll start the process of removing <hgroup> from my code.

No need, it's still valid.

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

On Wed, 1 May 2013, Micky Hulse wrote:
>
> 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>

(Note that there are two <article>s.)

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

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

> Clearly, in this case, the <hgroup> proves to be useful as it allows for 
> non-sequential heading orders and it pulls the <h1> as the title for 
> group in the outliner.

Right, that's the idea.

On Thu, 2 May 2013, Jukka K. Korpela wrote:
> 
> The natural approach is to mark headings by their structural level. You 
> don't then combine e.g. <h2> and <h3> into a single "header group" 
> supposed to act as a header block at structural level 2, worrying about 
> automatic analyzers getting the structure wrong somehow. Instead, you 
> use simply <h2> and style its parts differently if desired. The old and 
> robust way would be
> 
> <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.

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