Permalink
Browse files

[e] (0) Clarify <header>/<hgroup> etc.

git-svn-id: http://svn.whatwg.org/webapps@3041 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information...
1 parent a729fd0 commit b3e77f6f1a15c5cc7fedc9e16b4a480426b2e07e @Hixie Hixie committed Apr 30, 2009
Showing with 95 additions and 18 deletions.
  1. +47 −9 index
  2. +48 −9 source
View
56 index
@@ -12335,7 +12335,8 @@ 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 define headers for their sections.</p>
+ </dl><p>These elements <a href=#represents title=represents>represent</a> headers
+ for their sections.</p>
<p>The semantics and meaning of these elements are defined in the
section on <a href=#headings-and-sections>headings and sections</a>.</p>
@@ -12361,8 +12362,9 @@ isn't his only passion. He also enjoys other pleasures.&lt;/p&gt;
<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 to mark up a page's
- title with its subtitle or tagline.</p>
+ <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
+ multiple levels, such as subheadings, alternative titles, or
+ taglines.</p>
<p>For the purposes of document summaries, outlines, and the like,
the text of <code><a href=#the-hgroup-element>hgroup</a></code> elements is defined to be the text
@@ -12416,12 +12418,13 @@ 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>The <code><a href=#the-header-element>header</a></code> element <a href=#represents>represents</a> a header
- for the section it <a href=#applyToSection>applies</a> to. A
- header typically contains a heading
- (<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> or <code><a href=#the-hgroup-element>hgroup</a></code>), a
- table of contents, a search form, relevant logos, and other
- introductory or navigational aids.</p>
+ </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
+ <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>
@@ -12463,6 +12466,41 @@ isn't his only passion. He also enjoys other pleasures.&lt;/p&gt;
</div>
+ <p class=note>The <code><a href=#the-header-element>header</a></code> element is not
+ <a href=#sectioning-content-0>sectioning content</a>; it doesn't introduce a new
+ section.</p>
+
+ <div class=example>
+
+ <p>In this example, the page has a page heading given by the
+ <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code> element, and two subsections whose headings are
+ given by <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h2</a></code> elements. The content after the
+ <code><a href=#the-header-element>header</a></code> element is still part of the last subsection
+ started in the <code><a href=#the-header-element>header</a></code> element, because the
+ <code><a href=#the-header-element>header</a></code> element doesn't take part in the
+ <a href=#outline>outline</a> algorithm.</p>
+
+ <pre>&lt;body&gt;
+ &lt;header&gt;
+ &lt;h1&gt;Little Green Guys With Guns&lt;/h1&gt;
+ &lt;nav&gt;
+ &lt;ul&gt;
+ &lt;li&gt;&lt;a href="/games"&gt;Games&lt;/a&gt; |
+ &lt;li&gt;&lt;a href="/forum"&gt;Forum&lt;/a&gt; |
+ &lt;li&gt;&lt;a href="/download"&gt;Download&lt;/a&gt;
+ &lt;/ul&gt;
+ &lt;/nav&gt;
+ &lt;h2&gt;Important News&lt;/h2&gt; &lt;!-- this starts a second subsection --&gt;
+ &lt;!-- this is part of the subsection entitled "Important News" --&gt;
+ &lt;p&gt;To play today's games you will need to update your client.&lt;/p&gt;
+ &lt;h2&gt;Games&lt;/h2&gt; &lt;!-- this starts a second subsection --&gt;
+ &lt;/header&gt;
+ &lt;p&gt;You have three active games:&lt;/p&gt;
+ &lt;!-- this is still part of the subsection entitled "Games" --&gt;
+ ...</pre>
+
+ </div>
+
View
57 source
@@ -13180,7 +13180,8 @@ isn't his only passion. He also enjoys other pleasures.&lt;/p>
<dd>Uses <code>HTMLElement</code>.</dd>
</dl>
- <p>These elements define headers for their sections.</p>
+ <p>These elements <span title="represents">represent</span> headers
+ for their sections.</p>
<p>The semantics and meaning of these elements are defined in the
section on <span>headings and sections</span>.</p>
@@ -13209,8 +13210,9 @@ isn't his only passion. He also enjoys other pleasures.&lt;/p>
<p>The <code>hgroup</code> element <span>represents</span> the
header of a section. The element is used to group a set of
- <code>h1</code>&ndash;<code>h6</code> elements to mark up a page's
- title with its subtitle or tagline.</p>
+ <code>h1</code>&ndash;<code>h6</code> elements when the header has
+ multiple levels, such as subheadings, alternative titles, or
+ taglines.</p>
<p>For the purposes of document summaries, outlines, and the like,
the text of <code>hgroup</code> elements is defined to be the text
@@ -13267,12 +13269,14 @@ isn't his only passion. He also enjoys other pleasures.&lt;/p>
<dd>Uses <code>HTMLElement</code>.</dd>
</dl>
- <p>The <code>header</code> element <span>represents</span> a header
- for the section it <a href="#applyToSection">applies</a> to. A
- header typically contains a heading
- (<code>h1</code>&ndash;<code>h6</code> or <code>hgroup</code>), a
- table of contents, a search form, relevant logos, and other
- introductory or navigational aids.</p>
+ <p>The <code>header</code> element <span>represents</span> a group
+ of introductory or navigational aids for the section it <a
+ href="#applyToSection">applies</a> to. A <code>header</code> element
+ typically contains the section's header (an
+ <code>h1</code>&ndash;<code>h6</code> element or an
+ <code>hgroup</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>header</code> element <a href="#applyToSection">applies</a>
@@ -13314,6 +13318,41 @@ isn't his only passion. He also enjoys other pleasures.&lt;/p>
</div>
+ <p class="note">The <code>header</code> element is not
+ <span>sectioning content</span>; it doesn't introduce a new
+ section.</p>
+
+ <div class="example">
+
+ <p>In this example, the page has a page heading given by the
+ <code>h1</code> element, and two subsections whose headings are
+ given by <code>h2</code> elements. The content after the
+ <code>header</code> element is still part of the last subsection
+ started in the <code>header</code> element, because the
+ <code>header</code> element doesn't take part in the
+ <span>outline</span> algorithm.</p>
+
+ <pre>&lt;body>
+ &lt;header>
+ &lt;h1>Little Green Guys With Guns&lt;/h1>
+ &lt;nav>
+ &lt;ul>
+ &lt;li>&lt;a href="/games">Games&lt;/a> |
+ &lt;li>&lt;a href="/forum">Forum&lt;/a> |
+ &lt;li>&lt;a href="/download">Download&lt;/a>
+ &lt;/ul>
+ &lt;/nav>
+ &lt;h2>Important News&lt;/h2> &lt;!-- this starts a second subsection -->
+ &lt;!-- this is part of the subsection entitled "Important News" -->
+ &lt;p>To play today's games you will need to update your client.&lt;/p>
+ &lt;h2>Games&lt;/h2> &lt;!-- this starts a second subsection -->
+ &lt;/header>
+ &lt;p>You have three active games:&lt;/p>
+ &lt;!-- this is still part of the subsection entitled "Games" -->
+ ...</pre>
+
+ </div>
+

0 comments on commit b3e77f6

Please sign in to comment.