[html5] Can a <section> wrap more than one <h1>?

Mon Mar 15 17:12:24 PDT 2010

On Sat, 13 Mar 2010, Tae Sandoval Murgan wrote:
> On Fri, Mar 12, 2010 at 20:43, Ian Hickson <ian at hixie.ch> wrote:
> > On Mon, 1 Mar 2010, Tae Sandoval Murgan wrote:
> > If you have two <h1>s in the section, it's effectively two sections. A
> > <section> scopes <hx>s like <body> does.
> 
> That behavior makes me ask: what is <section> for? I thought that for
> to structure a page in a easier way, 'cause allows to do things like:
> 
> <section>
>     <h1></h1>
>     <section>
>         <h1></h1>
>     </section>
> </section>
> 
> but the spec says: "Authors are also encouraged to explicitly wrap
> sections in elements of sectioning content, instead of relying on the
> implicit sections generated by having multiple headings in one element
> of sectioning content." So I'm a little bit confuse.

The text you quote here is saying what you're saying. It's recommending 
using one <section> per <h1>.

The behaviour with two <h1>s in a <section> is more or less error handling 
(though it's not technically an error). You can think of <section> as 
being similar to <body>: it provides a scope for <hx> elements.

> <section> is not for apply style to content, however that's the only 
> useful feature that I see, 'cause
> 
> <body>
>     <h1></h1>
> </body>
> 
> is the same as:
> 
> <body>
>     <section>
>         <h1></h1>
>     </section>
> </body>
> 
> with no less semantic/structural value, or am I missing something?

When you only have one section, there's not much point having <section>. 
But when you have many, it makes it easier to move content around, style 
it, etc, if you use one <section> per actual section (and thus per <hx>).

> > If you have a suggestion for an example to demonstrate this, and if 
> > you have a good suggestion of where I should put it (where did you 
> > look to try to understand this? That's probably the best place) I'd be 
> > happy to add one.
> 
> Well, I wrote some like:
> 
> <body>
>     <header>
>         <h1>Apples</h1>
>     </header>
>     <section>
>         <h1>Taste</h1>
>         <p>They taste lovely.</p>
>     </section>
>     <section>
>         <h1>Sweet</h1>
>         <p>Red apples are sweeter than green one.</p>
>         <h1>Color</h1>
>         <p>Apples come in various colors.</p>
>     </section>
> </body>
> 
> And I was reading the section 4.4.11: Headings and sections[1], trying 
> to understand it.

Does the example similar to the above in the spec not explain this 
sufficiently? I'm not sure how else to explain it really...

  <body>
   <section> 
    <h1>Apples</h1>
    <p>These are round.</p>
    <h1>Pears</h1>
    <p>These are pear-shaped.</p>
   </section>
  </body>

...is the same structure as:

  <body>
   <section> 
    <h1>Apples</h1>
    <p>These are round.</p>
   </section>
   <section>
    <h1>Pears</h1>
    <p>These are pear-shaped.</p>
   </section>
  </body>

The first one is harder to style and is more confusing, but it means the 
same thing.

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