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

Fri May 3 16:23:11 PDT 2013

On Fri, 3 May 2013, Micky Hulse wrote (slightly edited):
> >>
> >> <h1>This is a section</h1>
> >> <article>
> >>   <h3>Tertiary heading</h3>
> >>   <h1>Primary heading</h1>
> >>   <h2>Secondary heading</h2>
> >> </article>
> >
> > This is equivalent to:
> >   <body>
> >     <h1>This is a section</h1>
> >     <article>
> >       <h1>Tertiary heading</h1>
> >     </article>
> >     <article>
> >       <h1>Primary heading</h1>
> >       <section>
> >         <h1>Secondary heading</h1>
> >       </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?

The first heading element (<h1>-<h6> or <hgroup>) of a sectioning content 
element (article, aside, nav, section) or sectioning root element 
(blockquote, body, details, dialog, fieldset, figure, td) is the heading 
for that element. So in the example above, the <h3> is the heading of the 
<article>. Then, if you find another heading with a lower rank (higher 
number), e.g. an <h4> in this case, that starts a subsection. However, if 
you find an element with a higher or equal rank, then that starts a new 
section. The <h1> that follows the <h3> thus can't be a subsection of the 
<h3> (since it's higher rank), so it must be a sibling section. Since the 
sectioning content element here is an <article>, it essentially splits the 
<article> in half. The <h2> after it is lower rank than the <h1>, so it 
forms a subsection under the <h1>.

If you always use <h1>s (outside of <hgroup>s), and only ever have one per 
sectioning content or sectioning root element, you don't have a problem, 
since it's always clear which heading is associated with which section. 
It's only when you bring <h2>-<h6> into the mix, or have multiple 
equally-ranked headings in the same section, that things get hairy.

> I'd love to know of the tool or technique that could help me translate 
> HTML5 markup into the example you provide above. :)

The algorithm is this one:

   http://whatwg.org/html#outline

...but admittedly it can be hard to follow.

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