[whatwg] Re: <section> and headings

[fantasai]

Ian Hickson wrote:
> On Thu, 2 Sep 2004, James Graham wrote:
> 
>>My model ignores whether one uses <h1>, <h2>... or even a hypothetical 
>><h> for the purposes of structure (justification: authors already do the 
>>same so we're unlikely to break any UAs that work with real websites). 
>>The choice of <h1>....<h6> should reflect the 'importance' of the 
>>heading. In a highly structured document, this might reflect the 
>>structure. In a newspaper, this might reflect the editorial importance 
>>attached to each story. In a document with a sidebar, the sidebar 
>>headings might be given lower importance than the headings in the main 
>>content.
> 
> I do like this idea, but it isn't really workable. We need authors to be 
> able to use HTML5 markup and yet still have it render correctly in HTML4 
> UAs, which basically means that we need <h2>-<h6> to mean exactly what 
> they do in HTML4, or at least mean that as much as anything else. So we 
> couldn't say that <h3> meant a minor heading, since otherwise the 
> following:
> 
>    <h1>...</h1>
>    <section>
>     <h2>...</h2>
>     <section>
>      <h3>...</h3>
> 
> ...would not be exactly equivalent to:
> 
>    <h1>...</h1>
>    <h2>...</h2>
>    <h3>...</h3>
> 
> ...which we want.   

I would define things as follows:

  - The first header in a <section> is that section's top-level header
  - Depth of section increases:
      - when heading number increases
      - when <section> nesting increases--but this increments from
        the last top-level <section> header rather than the last header
  - Depth of section does not decrease with a header number that is higher
    than the section's top-level header's number. (This means all
    subsequent header number increments increment based on this header's
    number instead of the top-level header's number.)
  - Section header immediately following a section header of the same level
    is considered a subtitle.

The minimal snippets you gave would both result in three headers with the
following depth levels:

    header depth=1
    header depth=2
    header depth=3

An example that mixes <section> and no-<section> heading styles:

   <h1>...</h1>      ->  header depth=1
   <h2>...</h2>      ->  header depth=2
   ...
   <section class="sidebar">
     <h1>...</h1>    ->  header   depth=2
     <h1>...</h1>    ->  subtitle depth=2
     ...
     <h2>...</h2>    ->  header   depth=3
     ...
   </section>
   <h2>...</h2>      ->  header depth=2
   ...
   <h3>...</h3>      ->  header depth=3
   ...
   <h3>...</h3>      ->  header depth=3

This is equivalent to


   <h1>...</h1>      ->  header depth=1
   <h2>...</h2>      ->  header depth=2
   ...
   <h2>...</h2>      ->  header   depth=2
   <h2>...</h2>      ->  subtitle depth=2
   ...
   <h3>...</h3>      ->  header   depth=3
   ...
   <h2>...</h2>      ->  header depth=2
   ...
   <h3>...</h3>      ->  header depth=3
   ...
   <h3>...</h3>      ->  header depth=3

and also equivalent to

   <h1>...</h1>      ->  header depth=1
   <h2>...</h2>      ->  header depth=2
   ...
   <section class="sidebar">
     <h3>...</h3>    ->  header   depth=2
     <h3>...</h3>    ->  subtitle depth=2
     ...
     <h4>...</h4>    ->  header   depth=3
     ...
   </section>
   <h2>...</h2>      ->  header depth=2
   ...
   <h3>...</h3>      ->  header depth=3
   ...
   <h3>...</h3>      ->  header depth=3

as far as header depth goes.

One more example:

   <h1>...</h1>      ->  header depth=1
   <h2>...</h2>      ->  header depth=2
   ...
   <section>
     <h4 class="date">...</h4> ->  header   depth=2
     <h2>...</h2>              ->  header   depth=2  //resets sect's
                                                     //reference header to h2
     ...
     <h3>...</h3>              ->  header   depth=3
     ...
   </section>

Here's an attempt at writing CSS rules for this
(I'm not filling in the actual sizes, tho, and I'm
  only going up to level 4):

/* Top level Section */
h1 { font-size: level1; }
h2 { font-size: level2; }
h3 { font-size: level3; }
h4 { font-size: level4; }

/* First-level Section */
section > h1 { font-size: level2; }
section > h2 { font-size: level2; }
section > h3 { font-size: level2; }
section > h4 { font-size: level2; }

section > h3 ~ h4 { font-size: level3; }

section > h2 ~ h3 { font-size: level3; }
section > h2 ~ h4 { font-size: level4; }

section > h1 ~ h2 { font-size: level3; }
section > h1 ~ h3 { font-size: level4; }
section > h1 ~ h4 { font-size: level5; }

/* Second-level Section */
section > section > h1 { font-size: level3; }
section > section > h2 { font-size: level3; }
section > section > h3 { font-size: level3; }
section > section > h4 { font-size: level3; }

section > section > h3 ~ h4 { font-size: level4; }

section > section > h2 ~ h3 { font-size: level4; }
section > section > h2 ~ h4 { font-size: level5; }

section > section > h1 ~ h2 { font-size: level4; }
section > section > h1 ~ h3 { font-size: level5; }
section > section > h1 ~ h4 { font-size: level6; }

/* Third-level Section */
section > section > section > h1 { font-size: level4; }
section > section > section > h2 { font-size: level4; }
section > section > section > h3 { font-size: level4; }
section > section > section > h4 { font-size: level4; }

section > section > section > h3 ~ h4 { font-size: level5; }

section > section > section > h2 ~ h3 { font-size: level5; }
section > section > section > h2 ~ h4 { font-size: level6; }

section > section > section > h1 ~ h2 { font-size: level5; }
section > section > section > h1 ~ h3 { font-size: level6; }
section > section > section > h1 ~ h4 { font-size: level7; }

/* Fourth-level Section */

Exercise for reader: extrapolate.


The CSS worked out rather easier than I thought... (I chose the
increment rules mainly because they work well with importance-chosen
headers for sidebars and double (e.g. date + topic) headers, not
because of the CSS.)

Example of double header:
   http://www.alistapart.com/
(ISSN bit is <h6>, but is semantically a top-level header for the whole section)

~fantasai
somewhat behind on mailing list mail atm
-- 
http://fantasai.inkedblade.net/contact