- From: Heydon Pickering <heydon@heydonworks.com>
- Date: Tue, 26 Feb 2013 18:10:55 +0000
- To: public-html@w3.org
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 Tuesday, 26 February 2013 18:11:26 UTC