Re: [whatwg] Sections, headers, and styling

Greetings.
This issue was initially raised on the HTML5 WHATWG's mailing list,
but it seems that it should be addressed here instead.

This is the original conversation in the HTML list:
On Tue, Nov 11, 2008 at 11:41 PM, Tab Atkins Jr. <jackalmage@gmail.com> wrote:
> On Tue, Nov 11, 2008 at 5:33 PM, Eduard Pascual <herenvardo@gmail.com>
> wrote:
>>
>> It is a quite common practice on current web pages to style the h1..h6
>> elements to have them blend properly with the overall style of a site.
>> For HTML4/XHTML1 documents this is quite trivial; but with HTML5 the
>> "number part" of the heading element doesn't reliably define the
>> actual heading level anymore (specially when dealing with server-side
>> includes and / or user-provided content). I have tried to figure out
>> some CSS selectors to handle this task with HTML 5 documents and they
>> go completely crazy before getting anywhere near to being accurate:
>> there is an insane ammount of element-nesting combinations to keep
>> track of. Is there any sane way to deal with this basic need?
>
> Generally you want to decide if you're going to use the numbered range, or
> just <h1>.
>
> If the former, just work it like you always would.  If the latter, you have
> to do something like "h1 ~ section h1" to match what would otherwise be an
> h2.  This will also match deeper headings, of course, so you want to put in
> the h3-equivalent selector as well, and possibly further.
>
> However, this is an interesting problem in general, that is perhaps best
> served by CSS itself.  Perhaps something like a :heading(n) pseudoclass,
> which'll match headings of the given level.  What qualifies as a heading,
> and how they nest and change levels, would be up to the markup language
> (html5 in this case).  Vanilla html4 would just naively report <h1> as
> matching :heading(1), <h2> as matching :heading(2), etc.  Html5 would match
> according to the heading-depth algorithm, and take into account both the
> <hn> number and the depth within <section>s.
>
> ~TJ
>

I'd like to point out that Tab's suggestion of "h1 ~ section h1"
doesn't really work for HTML5 (nor, FWIW, any other language with two
or more different elements that can define sections): currently, one
would need something like
"h1 ~ section h1, h1 ~ article h1, h1 ~ nav h1" and so on, for all the
elements that define sections. That would only deal with level 2
headings, and trying to select deeper headings would increase the size
and complexity of the selectors exponentially, since an author would
need to account for all the possible combinations of nested sectioning
elements.
In addition, for content templating, relying on the choice between
using the numbered headings or only h1 is simply impossible: the
user-provided content is unpredictable, and any kind of template
should be ready to work with arbitrary user markup (even if users stay
true to a convention, different users of the same template may still
be following different conventions).
Also, it might be interesting to be able to select sections as well,
to provide level-based indenting, separators, and similar styling
features.

Following Tab's suggestion, I'd like to propose the addition of
:heading(n) and :section(n) pseudo-classes (or similar
pseudo-elements): what do they match depends on what the document's
markup language defines as headings and sections (for example, in
HTML4 :heading(n) would naively match the <hn> element (for n between
1 and 6), and section(n) wouldn't match anything, since the language
doesn't define sections; while in HTML5 what is matched would be based
on the non-trivial sectioning algorythms).
:heading(1) should match the top-level headings of the document;
further greater values of n would match the following lower-level
headings. On those situations where a "site-level heading" or similar
concept is defined, those would be matched with :heading(0).
Similarly, :section(0) would match the entire document's body (which,
in HTML, isn't exactly the same than the entire document, since it may
include header information); :section(1) would match each top-level
section; :section(2) would match sections that are a child section of
a top-level one, and in general, :section(n) should match any section
that is a child section of one matched by :section(n-1).

Received on Monday, 17 November 2008 18:36:47 UTC