- From: Steve Faulkner <faulkner.steve@gmail.com>
- Date: Wed, 27 Feb 2013 06:06:14 -0800
- To: Heydon Pickering <heydon@heydonworks.com>
- Cc: public-html@w3.org
- Message-ID: <CA+ri+VnCyowN8D53f9A3dSvSXcWpXWWtgC+kHT34VRE6uyQqtQ@mail.gmail.com>
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: > > <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. > > <http://www.paciellogroup.com/resources/wat-ie-about.html>
Received on Wednesday, 27 February 2013 14:07:24 UTC