- From: Heydon Pickering <heydon@heydonworks.com>
- Date: Wed, 27 Feb 2013 16:36:43 +0000
- To: Steve Faulkner <faulkner.steve@gmail.com>
- Cc: public-html@w3.org, Ian Hickson <ian@hixie.ch>
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:
<!DOCTYPE HTML>
<title>Feathers on The Site of Encyclopedic Knowledge</title>
<section>
<h1>A plea from our caretakers</h1>
<p>Please, we beg of you, send help! We're stuck in the server
room!</p>
</section>
<h1>Feathers</h1>
<p>Epidermal growths.</p>
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 <body>, 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 <body> 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 <body> 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:
>>
>> <section>
>> <h2>Heading</h2>
>> <p>Lorem ipsum dolor sit amet...</p>
>> </section>
>>
>> <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:
>>
>> <nav>
>> <h2>Main Navigation</h2>
>> <ul>
>> <li><a href="home">Home</a></li>
>> <li><a href="about">About</a></li>
>> <li><a href="contact">Contact</a></li>
>> </ul>
>> </nav>
>>
>> Example 2:
>>
>> <pre>
>> <nav aria-label="Main navigation">
>> <ul>
>> <li><a href="home">Home</a></li>
>> <li><a href="about">About</a></li>
>> <li><a href="contact">Contact</a></li>
>> </ul>
>> </nav>
>> </pre>
>>
>> <h3>3. Sections can contain both subsections (defined using sectioning
>> elements) and/or simple subheadings (placed without sectioning
>> elements).</h3>
>>
>> Example:
>>
>> <section>
>> <h2>Section heading</h2>
>> <p>Lorem ipsum dolor...</p>
>> <h3Subheading></h3>
>> <p>Lorem ipsum dolor...</p>
>> <aside>
>> <h3>Subsection heading</h3>
>> <p>etc...</p>
>> </aside>
>> </section>
>>
>> <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:
>>
>> <section>
>> <h2>Primary heading</h2>
>> <p>Lorem ipsum dolor...</p>
>> <h3>Subheading</h3>
>> <p>etc...</p>
>> </section>
>>
>> Incorrect example:
>>
>> <section>
>> <h2>Primary heading</h2>
>> <p>Lorem ipsum dolor...</p>
>> <h2>Imposter primary heading</h2>
>> <p>etc...</p>
>> </section>
>>
>> <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:
>>
>> <section>
>> <h2>Primary heading</h2>
>> <section>
>> <h3>Primary subsection heading</h3>
>> </section>
>> </section>
>>
>> Example 2:
>>
>> <section>
>> <h2>Primary heading</h2>
>> <section>
>> <h3>Primary subsection heading</h3>
>> </section>
>> <section>
>> <h5>Primary subsection heading for unimportant
>> section</h5>
>> </section>
>> </section>
>>
>> <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:
>>
>> <section>
>> <h2>Primary heading</h2>
>> <section>
>> <h3>Primary subsection heading</h3>
>> </section>
>> <section>
>> <h3>Another primary subsection heading</h3>
>> </section>
>> </section>
>>
>> Example 2:
>>
>> <section>
>> <h2>Primary heading</h2>
>> <section>
>> <h4>Primary subsection heading (lower importance) </h4>
>> </section>
>> <section>
>> <h3>Primary subsection heading (highest importance)
>> </h3>
>> </section>
>> <aside>
>> <h5>Primary subsection heading (lowest importance) </h5>
>> </aside>
>> </section>
>>
>> <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...
>>
>> <section>
>> <nav>
>> <h2>Main navigation</h2>
>> <nav>
>> <h1>Primary heading</h1>
>> </section>
>>
>> ...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...
>>
>> <section>
>> <h2>Main navigation</h2>
>> <h1>Primary heading</h1>
>> </section>
>>
>> ...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...
>>
>> <h2>Theme</h2>
>> <h3>Sub theme</h3>
>>
>> ...and example 2...
>>
>> <h2>Theme</h2>
>> <section>
>> <h3>Sub theme</h3>
>> </section>
>>
>> ...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...
>>
>> <h3>One Theme</h3>
>> <h3>Another Theme</h3>
>>
>> ...and this example...
>>
>> <article>
>> <h3>One Theme</h3>
>> </article>
>> <article>
>> <h3>Another Theme</h3>
>> </article>
>>
>> ...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)...
>>
>> <article>
>> <h2>Important story</h2>
>> </article>
>> <article>
>> <h3>Less important story</h3>
>> </article>
>> <article>
>> <h3>Equally less important story</h3>
>> </article>
>>
>> ...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):
>>
>> <article>
>> <h3>Not important story</h3>
>> </article>
>> <article>
>> <h2>Important story</h2>
>> </article>
>> <article>
>> <h3>Another not important story</h3>
>> </article>
>>
>> <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:37:13 UTC