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 06:06:14 -0800
Message-ID: <CA+ri+VnCyowN8D53f9A3dSvSXcWpXWWtgC+kHT34VRE6uyQqtQ@mail.gmail.com>
To: Heydon Pickering <heydon@heydonworks.com>
Cc: public-html@w3.org
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-sectionsand
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.
>
>


<http://www.paciellogroup.com/resources/wat-ie-about.html>
Received on Wednesday, 27 February 2013 14:07:24 UTC

This archive was generated by hypermail 2.3.1 : Monday, 29 September 2014 09:39:37 UTC