- From: fantasai <fantasai.lists@inkedblade.net>
- Date: Sat, 20 Nov 2004 17:55:08 -0500
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
Received on Saturday, 20 November 2004 14:55:08 UTC