W3C home > Mailing lists > Public > public-html@w3.org > February 2013

Re: changed advice on use of h1 headings in document outline.

From: Steve Faulkner <faulkner.steve@gmail.com>
Date: Wed, 27 Feb 2013 08:45:08 -0800
Message-ID: <CA+ri+VnoVyv=4ButwnQ7fmOFqV-Z8GMDq_J=FkuDiarABk6GoQ@mail.gmail.com>
To: Heydon Pickering <heydon@heydonworks.com>
Cc: public-html@w3.org, Ian Hickson <ian@hixie.ch>
Hi Heydon,

me thinks section is the immediate descendent of the body, i tried the
example in http://qa-dev.w3.org:8888/ which has a recently implemented
outline feature and the result is as per spec.

whether it makes sense or not is another question, I don't understand why
the <title> content is not taken into account in the outline algorithm when
<body> does not have an explicit heading?

regards
steve

On 27 February 2013 08:36, Heydon Pickering <heydon@heydonworks.com> wrote:

> Okay, I'll try to fit that in.
>
> But, before I proceed, I've found a potential bug / inaccuracy in the
> current advise...
>
> I wonder if I could have this confirmed first because it impacts on my
> proposals.
>
> Under Sample Outlines
> (
> http://www.w3.org/html/wg/drafts/html/master/sections.html#sample-outlines
> ),
> relating to the "Feathers" example, it states that "headings never
> rise above other sections". The example given is this:
>
> &lt;!DOCTYPE HTML&gt;
> &lt;title&gt;Feathers on The Site of Encyclopedic Knowledge&lt;/title&gt;
> &lt;section&gt;
>  &lt;h1&gt;A plea from our caretakers&lt;/h1&gt;
>  &lt;p&gt;Please, we beg of you, send help! We're stuck in the server
> room!&lt;/p&gt;
> &lt;/section&gt;
> &lt;h1&gt;Feathers&lt;/h1&gt;
> &lt;p&gt;Epidermal growths.&lt;/p&gt;
>
> The associated outline is illustrated like this:
>
>     1. (untitled page)
>         1. A plea from our caretakers
>     2. Feathers
>
> This doesn't make sense to me. The h1 of Feathers is an immediate
> descendant of &lt;body&gt;, surely making it body's de facto heading
> (there are no other headings in scope). Where has <em>untitled
> page</em> come from, then?
>
> If you paste the example into gsnedders' outline calculator
> (http://gsnedders.html5.org/outliner/) it not only attests that
> "Feathers" is indeed the primary heading for &lt;body&gt; but it
> helpfully lets "Feathers" rise above the subsection to demonstrate its
> primacy, like so:
>
> 1. Feathers
>       1. A plea from our caretakers
>
> Surely, gsnedders' interpretation makes the greatest sense.
> Subsections describe importance based on depth, not order, after all.
> The h1's primacy is dependant on its elevation in the hierachy - and
> indeed it is unnested in both examples - but I believe &lt;body&gt; is
> simply not "untitled". Shouldn't "Feathers" adopt the <em>untitled
> section</em> spot...?
>
> Cheers - Heydon.
>
> On Wed, Feb 27, 2013 at 2:06 PM, Steve Faulkner
> <faulkner.steve@gmail.com> wrote:
> > Hi Heydon,
> >
> > many thanks!
> >
> > for purposes of review, further discussion of your proposed text can you
> > possibly take a copy of the current
> >
> http://www.w3.org/html/wg/drafts/html/master/sections.html#headings-and-sections
> > and insert your text showing what/where you think the current text
> should be
> > modified and put the page up somewhere? As I think it would greatly aid
> > understanding of how it fits.
> >
> > best regards
> > Steve
> >
> >
> > On 26 February 2013 10:10, Heydon Pickering <heydon@heydonworks.com>
> wrote:
> >>
> >> Hi again, Steve.
> >>
> >> I've given the subject of heading and sectioning element related
> >> advice a lot of thought. I've started off small but incorporated
> >> advice on approaching structure (relationships) separately to
> >> importance. I think that the ability to use different heading levels
> >> across sibling sectioning elements is extremely powerful because you
> >> can indicate greater importance without being forced to describe a
> >> parent/child relationship in the outline. Importance != belonging. I
> >> am building on the concept of "importance" regarding heading level as
> >> seen - among other places - here:
> >> http://www.w3.org/TR/html401/struct/global.html#h-7.5.5 and favoring
> >> sectioning elements for describing structural relationships. However,
> >> structure through heading level chronology is also covered.
> >>
> >> Hopefully, you'll see what I mean ;-) Feedback more than welcome from
> >> anyone.
> >>
> >> Okay...
> >>
> >> ----------------------------------------------------------
> >>
> >> <h3>1. All sections of any context that include prose content
> >> (typically flow content that includes one or more paragraphs) are
> >> recommended to include a minimum of one heading.</h3>
> >>
> >> Example:
> >>
> >> &lt;section&gt;
> >>    &lt;h2&gt;Heading&lt;/h2&gt;
> >>    &lt;p&gt;Lorem ipsum dolor sit amet...&lt;/p&gt;
> >> &lt;/section&gt;
> >>
> >> <h3>2. For sections that are purely functional (interactive) and do
> >> not contain prose content, headings are optional. However, where
> >> headings are omitted, an alternative means of identification such as a
> >> WAI-ARIA label is recommended.</h3>
> >>
> >> Example 1:
> >>
> >> &lt;nav&gt;
> >>    &lt;h2&gt;Main Navigation&lt;/h2&gt;
> >>    &lt;ul&gt;
> >>       &lt;li&gt;&lt;a href="home"&gt;Home&lt;/a&gt;&lt;/li&gt;
> >>       &lt;li&gt;&lt;a href="about"&gt;About&lt;/a&gt;&lt;/li&gt;
> >>       &lt;li&gt;&lt;a href="contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
> >>    &lt;/ul&gt;
> >> &lt;/nav&gt;
> >>
> >> Example 2:
> >>
> >> <pre>
> >> &lt;nav aria-label="Main navigation"&gt;
> >>    &lt;ul&gt;
> >>       &lt;li&gt;&lt;a href="home"&gt;Home&lt;/a&gt;&lt;/li&gt;
> >>       &lt;li&gt;&lt;a href="about"&gt;About&lt;/a&gt;&lt;/li&gt;
> >>       &lt;li&gt;&lt;a href="contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
> >>    &lt;/ul&gt;
> >> &lt;/nav&gt;
> >> </pre>
> >>
> >> <h3>3. Sections can contain both subsections (defined using sectioning
> >> elements) and/or simple subheadings (placed without sectioning
> >> elements).</h3>
> >>
> >> Example:
> >>
> >> &lt;section&gt;
> >>    &lt;h2&gt;Section heading&lt;/h2&gt;
> >>    &lt;p&gt;Lorem ipsum dolor...&lt;/p&gt;
> >>    &lt;h3Subheading&gt;&lt;/h3&gt;
> >>    &lt;p&gt;Lorem ipsum dolor...&lt;/p&gt;
> >>    &lt;aside&gt;
> >>       &lt;h3&gt;Subsection heading&lt;/h3&gt;
> >>       &lt;p&gt;etc...&lt;/p&gt;
> >>    &lt;/aside&gt;
> >> &lt;/section&gt;
> >>
> >> <h3>4. The first heading of a section _not_ appearing within a
> >> subsection should be the highest level heading for that section and be
> >> the only heading of its level. This is the primary heading - the
> >> identifier for the section.</h3>
> >>
> >> Correct example:
> >>
> >> &lt;section&gt;
> >>    &lt;h2&gt;Primary heading&lt;/h2&gt;
> >>    &lt;p&gt;Lorem ipsum dolor...&lt;/p&gt;
> >>    &lt;h3&gt;Subheading&lt;/h3&gt;
> >>    &lt;p&gt;etc...&lt;/p&gt;
> >> &lt;/section&gt;
> >>
> >> Incorrect example:
> >>
> >> &lt;section&gt;
> >>    &lt;h2&gt;Primary heading&lt;/h2&gt;
> >>    &lt;p&gt;Lorem ipsum dolor...&lt;/p&gt;
> >>    &lt;h2&gt;Imposter primary heading&lt;/h2&gt;
> >>    &lt;p&gt;etc...&lt;/p&gt;
> >> &lt;/section&gt;
> >>
> >> <h3>5. The heading levels of primary headings in subsections should
> >> each be of a lower level (higher number) than the parent section.</h3>
> >>
> >> Example 1:
> >>
> >> &lt;section&gt;
> >>    &lt;h2&gt;Primary heading&lt;/h2&gt;
> >>    &lt;section&gt;
> >>       &lt;h3&gt;Primary subsection heading&lt;/h3&gt;
> >>    &lt;/section&gt;
> >> &lt;/section&gt;
> >>
> >> Example 2:
> >>
> >> &lt;section&gt;
> >>    &lt;h2&gt;Primary heading&lt;/h2&gt;
> >>    &lt;section&gt;
> >>       &lt;h3&gt;Primary subsection heading&lt;/h3&gt;
> >>    &lt;/section&gt;
> >>    &lt;section&gt;
> >>       &lt;h5&gt;Primary subsection heading for unimportant
> >> section&lt;/h5&gt;
> >>    &lt;/section&gt;
> >> &lt;/section&gt;
> >>
> >> <em>Note that the h4 level has been omitted in example 2. In this
> >> example, the sectioning elements ensure that the two subsections are
> >> considered siblings, giving us the freedom to indicate "importance"
> >> using the  heading levels that we deem appropriate. See (10).</em>
> >>
> >> <h3>6. At least one of the immediate subsections of a section should
> >> have a heading that is _immediately_ below it in level. That is, if
> >> the section's primary heading is h(n), at least one of the immediate
> >> subsections should have a heading of h(n+1).</h3>
> >>
> >> Example 1:
> >>
> >> &lt;section&gt;
> >>    &lt;h2&gt;Primary heading&lt;/h2&gt;
> >>    &lt;section&gt;
> >>       &lt;h3&gt;Primary subsection heading&lt;/h3&gt;
> >>    &lt;/section&gt;
> >>    &lt;section&gt;
> >>       &lt;h3&gt;Another primary subsection heading&lt;/h3&gt;
> >>    &lt;/section&gt;
> >> &lt;/section&gt;
> >>
> >> Example 2:
> >>
> >> &lt;section&gt;
> >>    &lt;h2&gt;Primary heading&lt;/h2&gt;
> >>    &lt;section&gt;
> >>       &lt;h4&gt;Primary subsection heading (lower importance)
> &lt;/h4&gt;
> >>    &lt;/section&gt;
> >>    &lt;section&gt;
> >>       &lt;h3&gt;Primary subsection heading (highest importance)
> >> &lt;/h3&gt;
> >>    &lt;/section&gt;
> >>    &lt;aside&gt;
> >>       &lt;h5&gt;Primary subsection heading (lowest importance)
> &lt;/h5&gt;
> >>    &lt;/aside&gt;
> >> &lt;/section&gt;
> >>
> >> <em>Note that, in example 2, the sibling heading levels do not appear
> >> in chronological order (h3 -> h4 -> h5): the highest heading level is
> >> reserved for the second of the three sibling subsections. This would
> >> be particularly useful when the second of three adjacent columns
> >> contains the most important content. AT users could skip to the
> >> highest heading level to forego unimportant content that appears
> >> before it in the chronology. Note that, again, the use of sectioning
> >> elements preserves a flat outline across adjacent sections of
> >> differing "importance":</em>
> >>
> >> h2.
> >> -> h4. Primary subsection heading (lower importance)
> >> -> h3. Primary subsection heading (highest importance)
> >> -> h5. Primary subsection heading (lowest importance)
> >>
> >> <h3>7. Subheadings can precede a section's primary heading, but _only_
> >> if they are wrapped in a sectioning element.</h3>
> >>
> >> This correct example...
> >>
> >> &lt;section&gt;
> >>    &lt;nav&gt;
> >>       &lt;h2&gt;Main navigation&lt;/h2&gt;
> >>    &lt;nav&gt;
> >>    &lt;h1&gt;Primary heading&lt;/h1&gt;
> >> &lt;/section&gt;
> >>
> >> ...produces this outline (note how the section's primary heading is
> >> "promoted" to the top to show that "Main Navigation" belongs to the
> >> parent section):
> >>
> >> h1. Primary heading
> >> -> h2. Main navigation
> >>
> >> This incorrect example...
> >>
> >> &lt;section&gt;
> >>    &lt;h2&gt;Main navigation&lt;/h2&gt;
> >>    &lt;h1&gt;Primary heading&lt;/h1&gt;
> >> &lt;/section&gt;
> >>
> >> ...produces an unindicative outline where the navigation is considered
> >> adjacent to the section, not subject to it:
> >>
> >> h2. Main navigation
> >> h1. Primary heading
> >>
> >> <h3>8. Whether created by putting a sectioning element inside another
> >> sectioning element or using a simple subheading, any subsection is
> >> considered _subject_ to its parent section. In both the following
> >> examples, the subheading of "Sub Theme" is considered to preside over
> >> content that <strong>thematically belongs</strong> to the parent
> >> section: The subheading indicates a "subtopic".</h3>
> >>
> >> Example 1...
> >>
> >> &lt;h2&gt;Theme&lt;/h2&gt;
> >> &lt;h3&gt;Sub theme&lt;/h3&gt;
> >>
> >> ...and example 2...
> >>
> >> &lt;h2&gt;Theme&lt;/h2&gt;
> >> &lt;section&gt;
> >>    &lt;h3&gt;Sub theme&lt;/h3&gt;
> >> &lt;/section&gt;
> >>
> >> ...both produce an outline that indicates subjection (belonging), like
> so:
> >>
> >> h2. Theme
> >> -> h3.Sub theme
> >>
> >> <h3>9. To describe two sections where neither belongs to the other
> >> thematically and both are of <strong>equal importance</strong>, one
> >> can use two successive headings of the same level (number), or two
> >> adjacent sectioning elements, also with headings of the same
> >> level.</h3>
> >>
> >> This example...
> >>
> >> &lt;h3&gt;One Theme&lt;/h3&gt;
> >> &lt;h3&gt;Another Theme&lt;/h3&gt;
> >>
> >> ...and this example...
> >>
> >> &lt;article&gt;
> >>    &lt;h3&gt;One Theme&lt;/h3&gt;
> >> &lt;/article&gt;
> >> &lt;article&gt;
> >>    &lt;h3&gt;Another Theme&lt;/h3&gt;
> >> &lt;/article&gt;
> >>
> >> ...both produce this flat outline:
> >>
> >> h3. One Theme
> >> h3. Another Theme
> >>
> >> <h3>10. Building on the second example from (8) - and refering back to
> >> the note in (6) - it is possible to describe adjacent (sibling)
> >> sections with headings that indicate different <strong>levels of
> >> importance</strong>.</h3>
> >>
> >> Example 1 (a "top story" article)...
> >>
> >> &lt;article&gt;
> >>    &lt;h2&gt;Important story&lt;/h2&gt;
> >> &lt;/article&gt;
> >> &lt;article&gt;
> >>    &lt;h3&gt;Less important story&lt;/h3&gt;
> >> &lt;/article&gt;
> >> &lt;article&gt;
> >>    &lt;h3&gt;Equally less important story&lt;/h3&gt;
> >> &lt;/article&gt;
> >>
> >> ...produces an outline correctly showing no nesting relationships
> >> (belonging), but which uses a higher level heading to favor the
> >> "important" story:
> >>
> >> h2. Important story
> >> h3. Less important story
> >> h3. Equally less important story
> >>
> >> <em>Note: By omitting the article sectioning elements, "Less important
> >> story" and "Equally less important story" would appear to belong to
> >> "Important story". This would be misleading, especially if the stories
> >> are on different subjects or from different sources. Removing the
> >> sectioning elements, the erroneous outline would look like this: </em>
> >>
> >> h2. Important story
> >> -> h3. Less important story
> >> -> h3. Equally less important story
> >>
> >> Example 2 shows that importance does not have to be bound to order
> >> (see (6), Example 2, for another example):
> >>
> >> &lt;article&gt;
> >>    &lt;h3&gt;Not important story&lt;/h3&gt;
> >> &lt;/article&gt;
> >> &lt;article&gt;
> >>    &lt;h2&gt;Important story&lt;/h2&gt;
> >> &lt;/article&gt;
> >> &lt;article&gt;
> >>    &lt;h3&gt;Another not important story&lt;/h3&gt;
> >> &lt;/article&gt;
> >>
> >> <em>This example would be pertinent in a situation where order is
> >> determined according to time. That is, first may equal "latest" (as in
> >> most blogs), but _not_ most important. AT users can read
> >> chronologically or "jump" to any important stories.</em>
> >>
> >> ----------------------------------------------------------
> >>
> >> Cheers - Heydon.
> >>
> >
> >
> >
>
Received on Wednesday, 27 February 2013 16:46:17 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Wednesday, 27 February 2013 16:46:18 GMT