Skip to content

Commit

Permalink
[e] (0) Attempt to resolve the terminology confusion of heading vs he…
Browse files Browse the repository at this point in the history 
…ader.

git-svn-id: http://svn.whatwg.org/webapps@3043 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information
@Hixie
Hixie committed Apr 30, 2009
1 parent 4142d11 commit 77883ac
Show file tree
Hide file tree
Showing 2 changed files with 64 additions and 73 deletions.
68 changes: 32 additions & 36 deletions index
View file
Expand Up @@ -8619,7 +8619,7 @@ background: transparent"&gt;blue&lt;/span&gt;.&lt;/p&gt;</pre>
<h5 id=sectioning-content><span class=secno>3.4.1.3 </span>Sectioning content</h5>

<p><dfn id=sectioning-content-0>Sectioning content</dfn> is content that defines the scope
of <a href=#heading-content-0 title="heading content">headers</a>, <a href=#the-footer-element title=footer>footers</a>, and <a href=#the-address-element title=address>contact
of <a href=#heading-content-0 title="heading content">headings</a>, <a href=#the-footer-element title=footer>footers</a>, and <a href=#the-address-element title=address>contact
information</a>.</p>

<p>Each <a href=#sectioning-content-0>sectioning content</a> element potentially has a
Expand Down Expand Up @@ -8857,7 +8857,7 @@ http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20HTML%3E%0
<div class=example>

<p>In the following example, there are two paragraphs in a
section. There is also a header, which contains phrasing content
section. There is also a heading, which contains phrasing content
that is not a paragraph. Note how the comments and
<a href=#inter-element-whitespace>inter-element whitespace</a> do not form paragraphs.</p>

Expand Down Expand Up @@ -8887,7 +8887,7 @@ http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20HTML%3E%0
<div class=example>

<p>In the following example, the link spans half of the first
paragraph, all of the header separating the two paragraphs, and
paragraph, all of the heading separating the two paragraphs, and
half of the second paragraph.</p>

<pre>&lt;aside&gt;
Expand Down Expand Up @@ -9858,8 +9858,8 @@ http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20HTML%3E%0
document's title or name. Authors should use titles that identify
their documents even when they are used out of context, for example
in a user's history or bookmarks, or in search results. The
document's title is often different from its first header, since the
first header does not have to stand alone when taken out of
document's title is often different from its first heading, since the
first heading does not have to stand alone when taken out of
context.</p>

<p>There must be no more than one <code><a href=#the-title-element>title</a></code> element per
Expand All @@ -9871,7 +9871,7 @@ http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20HTML%3E%0
<div class=example>

<p>Here are some examples of appropriate titles, contrasted with
the top-level headers that might be used on those same pages.</p>
the top-level headings that might be used on those same pages.</p>

<pre> &lt;title&gt;Introduction to The Mating Rituals of Bees&lt;/title&gt;
...
Expand All @@ -9882,7 +9882,7 @@ http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20HTML%3E%0

<p>The next page might be a part of the same site. Note how the
title describes the subject matter unambiguously, while the first
header assumes the reader knows what the context is and therefore
heading assumes the reader knows what the context is and therefore
won't wonder if the dances are Salsa or Waltz:</p>

<pre> &lt;title&gt;Dances used during bee mating rituals&lt;/title&gt;
Expand Down Expand Up @@ -12115,7 +12115,7 @@ not-slash = %x0000-002E / %x0030-%10FFFF
<dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
</dl><p>The <code><a href=#the-section-element>section</a></code> element <a href=#represents>represents</a> a
generic document or application section. A section, in this context,
is a thematic grouping of content, typically with a header, possibly
is a thematic grouping of content, typically with a heading, possibly
with a footer.</p>

<p class=example>Examples of sections would be chapters, the
Expand Down Expand Up @@ -12335,7 +12335,7 @@ isn't his only passion. He also enjoys other pleasures.&lt;/p&gt;
<dd><a href=#global-attributes>Global attributes</a></dd>
<dt>DOM interface:</dt>
<dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
</dl><p>These elements <a href=#represents title=represents>represent</a> headers
</dl><p>These elements <a href=#represents title=represents>represent</a> headings
for their sections.</p>

<p>The semantics and meaning of these elements are defined in the
Expand All @@ -12361,8 +12361,8 @@ isn't his only passion. He also enjoys other pleasures.&lt;/p&gt;
<dt>DOM interface:</dt>
<dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
</dl><p>The <code><a href=#the-hgroup-element>hgroup</a></code> element <a href=#represents>represents</a> the
header of a section. The element is used to group a set of
<code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code>&ndash;<code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h6</a></code> elements when the header has
heading of a section. The element is used to group a set of
<code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code>&ndash;<code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h6</a></code> elements when the heading has
multiple levels, such as subheadings, alternative titles, or
taglines.</p>

Expand All @@ -12375,8 +12375,8 @@ isn't his only passion. He also enjoys other pleasures.&lt;/p&gt;
<a href=#rank>rank</a>. If there are no such elements, then the text of
the <code><a href=#the-hgroup-element>hgroup</a></code> element is the empty string.</p>

<p>Other heading elements in the <code><a href=#the-hgroup-element>hgroup</a></code> element
indicate subheadings or subtitles.</p>
<p>Other elements of <a href=#heading-content-0>heading content</a> in the
<code><a href=#the-hgroup-element>hgroup</a></code> element indicate subheadings or subtitles.</p>

<p>The <a href=#rank>rank</a> of an <code><a href=#the-hgroup-element>hgroup</a></code> element is the
same as for an <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code> element (the highest rank).</p>
Expand All @@ -12387,9 +12387,9 @@ isn't his only passion. He also enjoys other pleasures.&lt;/p&gt;

<div class=example>

<p>Here are some examples of valid headers. In each case, the
<p>Here are some examples of valid headings. In each case, the
emphasized text represents the text that would be used as the
header in an application extracting header data and ignoring
heading in an application extracting heading data and ignoring
subheadings.</p>

<pre>&lt;hgroup&gt;
Expand Down Expand Up @@ -12419,17 +12419,13 @@ isn't his only passion. He also enjoys other pleasures.&lt;/p&gt;
<dt>DOM interface:</dt>
<dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
</dl><p>The <code><a href=#the-header-element>header</a></code> element <a href=#represents>represents</a> a group
of introductory or navigational aids for the section it <a href=#applyToSection>applies</a> to. A <code><a href=#the-header-element>header</a></code> element
typically contains the section's header (an
of introductory or navigational aids. A <code><a href=#the-header-element>header</a></code> element
typically contains the section's heading (an
<code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code>&ndash;<code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h6</a></code> element or an
<code><a href=#the-hgroup-element>hgroup</a></code> element), but can also contain other content,
such as a table of contents, a search form, or any relevant
logos.</p>

<p>Contact information for the section to which the
<code><a href=#the-header-element>header</a></code> element <a href=#applyToSection>applies</a>
should be marked up using the <code><a href=#the-address-element>address</a></code> element.</p>

<div class=example>

<p>Here are some sample headers. This first one is for a game:</p>
Expand All @@ -12440,7 +12436,7 @@ isn't his only passion. He also enjoys other pleasures.&lt;/p&gt;
&lt;/header&gt;</pre>

<p>The following snippet shows how the element can be used to mark
up a specification's heading:</p>
up a specification's header:</p>

<pre>&lt;header&gt;
&lt;hgroup&gt;
Expand Down Expand Up @@ -12534,7 +12530,7 @@ isn't his only passion. He also enjoys other pleasures.&lt;/p&gt;
<p>The <code><a href=#the-footer-element>footer</a></code> element is inappropriate for containing
entire sections. For appendices, indexes, long colophons, verbose
license agreements, and other such content which needs sectioning
with headers and so forth, regular <code><a href=#the-section-element>section</a></code> elements
with headings and so forth, regular <code><a href=#the-section-element>section</a></code> elements
should be used, not a <code><a href=#the-footer-element>footer</a></code>.</p>

<div class=example>
Expand Down Expand Up @@ -12635,11 +12631,11 @@ isn't his only passion. He also enjoys other pleasures.&lt;/p&gt;

<p>The first element of <a href=#heading-content-0>heading content</a> in an element
of <a href=#sectioning-content-0>sectioning content</a> <a href=#represents>represents</a> the
header for that section. Subsequent headers of equal or higher
<a href=#rank>rank</a> start new (implied) sections, headers of lower
heading for that section. Subsequent headings of equal or higher
<a href=#rank>rank</a> start new (implied) sections, headings of lower
<a href=#rank>rank</a> start implied subsections that are part of the
previous one. In both cases, the element <a href=#represents>represents</a> the
header of the implied section.</p>
heading of the implied section.</p>

<p><a href=#sectioning-content-0>Sectioning content</a> elements are always considered
subsections of their nearest ancestor element of <a href=#sectioning-content-0>sectioning
Expand All @@ -12649,7 +12645,7 @@ isn't his only passion. He also enjoys other pleasures.&lt;/p&gt;
<p>Certain elements are said to be <dfn id=sectioning-root title="sectioning
root">sectioning roots</dfn>, including <code><a href=#the-blockquote-element>blockquote</a></code> and
<code><a href=#the-td-element>td</a></code> elements. These elements can have their own
outlines, but the sections and headers inside these elements do not
outlines, but the sections and headings inside these elements do not
contribute to the outlines of their ancestors.</p>

<div class=example>
Expand Down Expand Up @@ -12685,7 +12681,7 @@ isn't his only passion. He also enjoys other pleasures.&lt;/p&gt;
level.</p>
</div>

<p>Sections may contain headers of any <a href=#rank>rank</a>, but
<p>Sections may contain headings of any <a href=#rank>rank</a>, but
authors are strongly encouraged to either use only <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code>
elements, or to use elements of the appropriate <a href=#rank>rank</a>
for the section's nesting level.</p>
Expand Down Expand Up @@ -13011,7 +13007,7 @@ isn't his only passion. He also enjoys other pleasures.&lt;/p&gt;

<p class=note>Selecting the first <a href=#concept-section title=concept-section>section</a> of the document therefore
always takes the user to the top of the document, regardless of
where the first header in the <code><a href=#the-body-element>body</a></code> is to be found.</p>
where the first heading in the <code><a href=#the-body-element>body</a></code> is to be found.</p>
<!-- XXX assuming there is a body, anyway -->

<div class=note>
Expand Down Expand Up @@ -16143,7 +16139,7 @@ brighter. A &lt;b&gt;rat&lt;/b&gt; scurries past the corner wall.&lt;/p&gt;</pre
</div>

<p>The <code><a href=#the-b-element>b</a></code> element should be used as a last resort when
no other element is more appropriate. In particular, headers should
no other element is more appropriate. In particular, headings should
use the <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code> to <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h6</a></code> elements, stress emphasis
should use the <code><a href=#the-em-element>em</a></code> element, importance should be denoted
with the <code><a href=#the-strong-element>strong</a></code> element, and text marked or highlighted
Expand Down Expand Up @@ -17578,7 +17574,7 @@ document.write(), passes data to the Tokenizer."&gt;</strong>&lt;/p&gt;</pre>
project, band, software package, country, or some such.</p>

<p>If the logo is being used to represent the entity, e.g. as a page
header, the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute must
heading, the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute must
contain the name of the entity being represented by the logo. The
<code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute must <em>not</em>
contain text like the word "logo", as it is not the fact that it is
Expand Down Expand Up @@ -17660,11 +17656,11 @@ at least that would look good on the cover of a blue book.&lt;/p&gt;</pre>

<p>Consider a graphic containing the text "Earth Day", but with the
letters all decorated with flowers and plants. If the text is
merely being used as a header, to spice up the page for graphical
merely being used as a heading, to spice up the page for graphical
users, then the correct alternative text is just the same text
"Earth Day", and no mention need be made of the decorations:</p>

<pre>&lt;h1&gt;<strong>&lt;img src="earthdayheader.png" alt="Earth Day"&gt;</strong>&lt;/h1&gt;</pre>
<pre>&lt;h1&gt;<strong>&lt;img src="earthdayheading.png" alt="Earth Day"&gt;</strong>&lt;/h1&gt;</pre>

</div>

Expand Down Expand Up @@ -61845,9 +61841,9 @@ noembed, noframes, param, script, source, style, title {
}

address, article, aside, blockquote, body, center, dd, dialog, dir,
div, dl, dt, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hr,
html, legend, listing, menu, nav, ol, p, plaintext, pre, rp, section,
ul, xmp { display: block; }
div, dl, dt, figure, footer, form, h1, h2, h3, h4, h5, h6, header,
hgroup, hr, html, legend, listing, menu, nav, ol, p, plaintext, pre,
rp, section, ul, xmp { display: block; }

table { display: table; }
caption { display: table-caption; }
Expand Down

0 comments on commit 77883ac

Please sign in to comment.