Skip to content
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...
Hixie committed Apr 30, 2009
1 parent a729fd0 commit b3e77f6f1a15c5cc7fedc9e16b4a480426b2e07e
Showing with 95 additions and 18 deletions.
  1. +47 −9 index
  2. +48 −9 source
56 index
<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>
<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
<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>

</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>




57 source
<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>

<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
<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>

</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.
You can’t perform that action at this time.