Browse files

[ac] (0) Introduce a new <header> element.

git-svn-id: http://svn.whatwg.org/webapps@3040 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information...
1 parent 7e9b2d1 commit a729fd0c57b9a8cc7ed783a03e72cfc74549c9db @Hixie Hixie committed Apr 30, 2009
Showing with 199 additions and 121 deletions.
  1. +113 −75 index
  2. +86 −46 source
View
188 index
@@ -385,12 +385,13 @@
<code>h5</code>, and <code>h6</code>
elements</a></li>
<li><a href=#the-hgroup-element><span class=secno>4.4.7 </span>The <code>hgroup</code> element</a></li>
- <li><a href=#the-footer-element><span class=secno>4.4.8 </span>The <code>footer</code> element</a></li>
- <li><a href=#the-address-element><span class=secno>4.4.9 </span>The <code>address</code> element</a></li>
- <li><a href=#headings-and-sections><span class=secno>4.4.10 </span>Headings and sections</a>
+ <li><a href=#the-header-element><span class=secno>4.4.8 </span>The <code>header</code> element</a></li>
+ <li><a href=#the-footer-element><span class=secno>4.4.9 </span>The <code>footer</code> element</a></li>
+ <li><a href=#the-address-element><span class=secno>4.4.10 </span>The <code>address</code> element</a></li>
+ <li><a href=#headings-and-sections><span class=secno>4.4.11 </span>Headings and sections</a>
<ol>
- <li><a href=#outlines><span class=secno>4.4.10.1 </span>Creating an outline</a></li>
- <li><a href=#distinguishing-site-wide-headings-from-page-headings><span class=secno>4.4.10.2 </span>Distinguishing site-wide headings from page headings</a></ol></ol></li>
+ <li><a href=#outlines><span class=secno>4.4.11.1 </span>Creating an outline</a></li>
+ <li><a href=#distinguishing-site-wide-headings-from-page-headings><span class=secno>4.4.11.2 </span>Distinguishing site-wide headings from page headings</a></ol></ol></li>
<li><a href=#grouping-content><span class=secno>4.5 </span>Grouping content</a>
<ol>
<li><a href=#the-p-element><span class=secno>4.5.1 </span>The <code>p</code> element</a></li>
@@ -12182,20 +12183,21 @@ not-slash = %x0000-002E / %x0030-%10FFFF
navigation section.</p>
<pre>&lt;body&gt;
- <!--&lt;header>-->
+ &lt;header&gt;
&lt;h1&gt;Wake up sheeple!&lt;/h1&gt;
&lt;p&gt;&lt;a href="news.html"&gt;News&lt;/a&gt; -
&lt;a href="blog.html"&gt;Blog&lt;/a&gt; -
&lt;a href="forums.html"&gt;Forums&lt;/a&gt;&lt;/p&gt;
- <!--&lt;/header>-->
- &lt;nav&gt;
- &lt;h1&gt;Navigation&lt;/h1&gt;
- &lt;ul&gt;
- &lt;li&gt;&lt;a href="articles.html"&gt;Index of all articles&lt;/a&gt;&lt;/li&gt;
- &lt;li&gt;&lt;a href="today.html"&gt;Things sheeple need to wake up for today&lt;/a&gt;&lt;/li&gt;
- &lt;li&gt;&lt;a href="successes.html"&gt;Sheeple we have managed to wake&lt;/a&gt;&lt;/li&gt;
- &lt;/ul&gt;
- &lt;/nav&gt;
+ &lt;p&gt;Last Modified: &lt;time&gt;2009-04-01&lt;/time&gt;&lt;/p&gt;
+ &lt;nav&gt;
+ &lt;h1&gt;Navigation&lt;/h1&gt;
+ &lt;ul&gt;
+ &lt;li&gt;&lt;a href="articles.html"&gt;Index of all articles&lt;/a&gt;&lt;/li&gt;
+ &lt;li&gt;&lt;a href="today.html"&gt;Things sheeple need to wake up for today&lt;/a&gt;&lt;/li&gt;
+ &lt;li&gt;&lt;a href="successes.html"&gt;Sheeple we have managed to wake&lt;/a&gt;&lt;/li&gt;
+ &lt;/ul&gt;
+ &lt;/nav&gt;
+ &lt;/header&gt;
&lt;article&gt;
&lt;p&gt;...<em>page content would be here</em>...&lt;/p&gt;
&lt;/article&gt;
@@ -12398,19 +12400,48 @@ isn't his only passion. He also enjoys other pleasures.&lt;/p&gt;
&lt;h2&gt;Or: How I Learned to Stop Worrying and Love the Bomb&lt;/h2&gt;
&lt;/hgroup&gt;</pre>
-<!--
- The <code>header</code> element may contain more than just the
- section's headings and subheadings &mdash; for example it would be
- reasonable for the header to include version history information.
+ </div>
+
+
+ <h4 id=the-header-element><span class=secno>4.4.8 </span>The <dfn><code>header</code></dfn> element</h4>
+
+ <dl class=element><dt>Categories</dt>
+ <dd><a href=#flow-content-0>Flow content</a>.</dd>
+ <dt>Contexts in which this element may be used:</dt>
+ <dd>Where <a href=#flow-content-0>flow content</a> is expected.</dd>
+ <dt>Content model:</dt>
+ <dd><a href=#flow-content-0>Flow content</a>, but with no <code><a href=#the-header-element>header</a></code>
+ element descendants.</dd>
+ <dt>Content attributes:</dt>
+ <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>
+
+ <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>
<pre>&lt;header&gt;
&lt;p&gt;Welcome to...&lt;/p&gt;
- &lt;h1&gt;<strong>Voidwars!</strong>&lt;/h1&gt;
+ &lt;h1&gt;Voidwars!&lt;/h1&gt;
&lt;/header&gt;</pre>
+ <p>The following snippet shows how the element can be used to mark
+ up a specification's heading:</p>
+
<pre>&lt;header&gt;
&lt;hgroup&gt;
- &lt;h1&gt;<strong>Scalable Vector Graphics (SVG) 1.2</strong>&lt;/h1&gt;
+ &lt;h1&gt;Scalable Vector Graphics (SVG) 1.2&lt;/h1&gt;
&lt;h2&gt;W3C Working Draft 27 October 2004&lt;/h2&gt;
&lt;/hgroup&gt;
&lt;dl&gt;
@@ -12429,11 +12460,13 @@ isn't his only passion. He also enjoys other pleasures.&lt;/p&gt;
&lt;/dl&gt;
&lt;p class="copyright"&gt;&lt;a href="http://www.w3.org/Consortium/Legal/ipr-notic <em>...</em>
&lt;/header&gt;</pre>
--->
+
</div>
- <h4 id=the-footer-element><span class=secno>4.4.8 </span>The <dfn><code>footer</code></dfn> element</h4>
+
+
+ <h4 id=the-footer-element><span class=secno>4.4.9 </span>The <dfn><code>footer</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content-0>Flow content</a>.</dd>
@@ -12453,13 +12486,19 @@ isn't his only passion. He also enjoys other pleasures.&lt;/p&gt;
wrote it, links to related documents, copyright data, and the
like.</p>
- <p>Contact information for the section given in a
- <code><a href=#the-footer-element>footer</a></code> should be marked up using the
- <code><a href=#the-address-element>address</a></code> element.</p>
+ <p>Contact information for the section to which the
+ <code><a href=#the-footer-element>footer</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>
<p>Footers don't necessarily have to appear at the end of a section,
though they usually do.</p>
+ <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
+ should be used, not a <code><a href=#the-footer-element>footer</a></code>.</p>
+
<div class=example>
<p>Here is a page with two footers, one at the top and one at the
@@ -12484,7 +12523,7 @@ isn't his only passion. He also enjoys other pleasures.&lt;/p&gt;
</div>
- <h4 id=the-address-element><span class=secno>4.4.9 </span>The <dfn><code>address</code></dfn> element</h4>
+ <h4 id=the-address-element><span class=secno>4.4.10 </span>The <dfn><code>address</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
<dd><a href=#flow-content-0>Flow content</a>.</dd>
@@ -12551,7 +12590,7 @@ isn't his only passion. He also enjoys other pleasures.&lt;/p&gt;
- <h4 id=headings-and-sections><span class=secno>4.4.10 </span><dfn>Headings and sections</dfn></h4>
+ <h4 id=headings-and-sections><span class=secno>4.4.11 </span><dfn>Headings and sections</dfn></h4>
<p>The <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 and the
<code><a href=#the-hgroup-element>hgroup</a></code> element are headings.</p>
@@ -12660,7 +12699,7 @@ isn't his only passion. He also enjoys other pleasures.&lt;/p&gt;
</div>
- <h5 id=outlines><span class=secno>4.4.10.1 </span>Creating an outline</h5>
+ <h5 id=outlines><span class=secno>4.4.11.1 </span>Creating an outline</h5>
<div class=impl>
@@ -12971,7 +13010,7 @@ isn't his only passion. He also enjoys other pleasures.&lt;/p&gt;
</div>
- <h5 id=distinguishing-site-wide-headings-from-page-headings><span class=secno>4.4.10.2 </span>Distinguishing site-wide headings from page headings</h5>
+ <h5 id=distinguishing-site-wide-headings-from-page-headings><span class=secno>4.4.11.2 </span>Distinguishing site-wide headings from page headings</h5>
<div class=impl>
@@ -17468,35 +17507,33 @@ document.write(), passes data to the Tokenizer."&gt;</strong>&lt;/p&gt;</pre>
it means; the icon is supposed to be self-explanatory. In those
cases, an equivalent textual label must be given in the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute.</p>
-<!--
- <div class="example">
+ <div class=example>
<p>Here, posts on a news site are labeled with an icon
indicating their topic.</p>
- <pre>&lt;body>
- &lt;article>
- &lt;header>
- &lt;h1>Ratatouille wins &lt;i>Best Movie of the Year&lt;/i> award&lt;/h1>
- &lt;p><strong>&lt;img src="movies.png" alt="Movies"></strong>&lt;/p>
- &lt;/header>
- &lt;p>Pixar has won yet another &lt;i>Best Movie of the Year&lt;/i> award,
- making this its 8th win in the last 12 years.&lt;/p>
- &lt;/article>
- &lt;article>
- &lt;header>
- &lt;h1>Latest TWiT episode is online&lt;/h1>
- &lt;p><strong>&lt;img src="podcasts.png" alt="Podcasts"></strong>&lt;/p>
- &lt;/header>
- &lt;p>The latest TWiT episode has been posted, in which we hear
+ <pre>&lt;body&gt;
+ &lt;article&gt;
+ &lt;header&gt;
+ &lt;h1&gt;Ratatouille wins &lt;i&gt;Best Movie of the Year&lt;/i&gt; award&lt;/h1&gt;
+ &lt;p&gt;<strong>&lt;img src="movies.png" alt="Movies"&gt;</strong>&lt;/p&gt;
+ &lt;/header&gt;
+ &lt;p&gt;Pixar has won yet another &lt;i&gt;Best Movie of the Year&lt;/i&gt; award,
+ making this its 8th win in the last 12 years.&lt;/p&gt;
+ &lt;/article&gt;
+ &lt;article&gt;
+ &lt;header&gt;
+ &lt;h1&gt;Latest TWiT episode is online&lt;/h1&gt;
+ &lt;p&gt;<strong>&lt;img src="podcasts.png" alt="Podcasts"&gt;</strong>&lt;/p&gt;
+ &lt;/header&gt;
+ &lt;p&gt;The latest TWiT episode has been posted, in which we hear
several tech news stories as well as learning much more about the
iPhone. This week, the panelists compare how reflective their
- iPhones' Apple logos are.&lt;/p>
- &lt;/article>
-&lt;/body></pre>
+ iPhones' Apple logos are.&lt;/p&gt;
+ &lt;/article&gt;
+&lt;/body&gt;</pre>
</div>
--->
<p>Many pages include logos, insignia, flags, or emblems, which
stand for a particular entity such as a company, organization,
@@ -52582,12 +52619,12 @@ interface <dfn id=messageport>MessagePort</dfn> {
<code><a href=#the-div-element>div</a></code>, <code><a href=#the-dl-element>dl</a></code>, <code><a href=#the-fieldset-element>fieldset</a></code>,
<code><a href=#the-footer-element>footer</a></code>, <code><a href=#the-form-element>form</a></code>, <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code>,
<code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h2</a></code>, <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h3</a></code>, <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h4</a></code>, <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h5</a></code>,
- <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h6</a></code>, <code><a href=#the-hgroup-element>hgroup</a></code>, <code><a href=#the-hr-element>hr</a></code>,
- <code><a href=#menus>menu</a></code>, <code><a href=#the-nav-element>nav</a></code>, <code><a href=#the-ol-element>ol</a></code>,
- <code><a href=#the-p-element>p</a></code>, <code><a href=#the-pre-element>pre</a></code>, <code><a href=#the-section-element>section</a></code>,
- <code><a href=#the-table-element>table</a></code>, or <code><a href=#the-ul-element>ul</a></code>, element, or if there is no
- more content in the parent element and the parent element is not an
- <code><a href=#the-a-element>a</a></code> element.</p>
+ <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h6</a></code>, <code><a href=#the-header-element>header</a></code>, <code><a href=#the-hgroup-element>hgroup</a></code>,
+ <code><a href=#the-hr-element>hr</a></code>, <code><a href=#menus>menu</a></code>, <code><a href=#the-nav-element>nav</a></code>,
+ <code><a href=#the-ol-element>ol</a></code>, <code><a href=#the-p-element>p</a></code>, <code><a href=#the-pre-element>pre</a></code>,
+ <code><a href=#the-section-element>section</a></code>, <code><a href=#the-table-element>table</a></code>, or <code><a href=#the-ul-element>ul</a></code>,
+ element, or if there is no more content in the parent element and
+ the parent element is not an <code><a href=#the-a-element>a</a></code> element.</p>
<!-- </rt> -->
<p>An <code><a href=#the-rt-element>rt</a></code> element's <a href=#syntax-end-tag title=syntax-end-tag>end
@@ -53677,20 +53714,20 @@ interface <dfn id=messageport>MessagePort</dfn> {
<code><a href=#the-footer-element>footer</a></code>, <code><a href=#the-form-element>form</a></code>, <code>frame</code>,
<code>frameset</code>, <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code>, <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h2</a></code>,
<code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h3</a></code>, <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h4</a></code>, <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h5</a></code>, <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h6</a></code>,
- <code><a href=#the-head-element>head</a></code>, <code><a href=#the-hgroup-element>hgroup</a></code>, <code><a href=#the-hr-element>hr</a></code>,
- <code><a href=#the-iframe-element>iframe</a></code>, <!-- <code>image</code>, (commented out
- because this isn't an element that can end up on the stack, so it
- doesn't matter) --> <code><a href=#the-img-element>img</a></code>, <code><a href=#the-input-element>input</a></code>,
- <code>isindex</code>, <code><a href=#the-li-element>li</a></code>, <code><a href=#the-link-element>link</a></code>,
- <code>listing</code>, <code><a href=#menus>menu</a></code>, <code><a href=#meta>meta</a></code>,
- <code><a href=#the-nav-element>nav</a></code>, <code>noembed</code>, <code>noframes</code>,
- <code><a href=#the-noscript-element>noscript</a></code>, <code><a href=#the-ol-element>ol</a></code>, <code><a href=#the-p-element>p</a></code>,
- <code><a href=#the-param-element>param</a></code>, <code>plaintext</code>, <code><a href=#the-pre-element>pre</a></code>,
- <code><a href=#script>script</a></code>, <code><a href=#the-section-element>section</a></code>, <code><a href=#the-select-element>select</a></code>,
- <code>spacer</code>, <code><a href=#the-style-element>style</a></code>, <code><a href=#the-tbody-element>tbody</a></code>,
- <code><a href=#the-textarea-element>textarea</a></code>, <code><a href=#the-tfoot-element>tfoot</a></code>, <code><a href=#the-thead-element>thead</a></code>,
- <code><a href=#the-title-element>title</a></code>, <code><a href=#the-tr-element>tr</a></code>, <code><a href=#the-ul-element>ul</a></code>, and
- <code>wbr</code>.</dd>
+ <code><a href=#the-head-element>head</a></code>, <code><a href=#the-header-element>header</a></code>, <code><a href=#the-hgroup-element>hgroup</a></code>,
+ <code><a href=#the-hr-element>hr</a></code>, <code><a href=#the-iframe-element>iframe</a></code>, <!-- <code>image</code>,
+ (commented out because this isn't an element that can end up on the
+ stack, so it doesn't matter) --> <code><a href=#the-img-element>img</a></code>,
+ <code><a href=#the-input-element>input</a></code>, <code>isindex</code>, <code><a href=#the-li-element>li</a></code>,
+ <code><a href=#the-link-element>link</a></code>, <code>listing</code>, <code><a href=#menus>menu</a></code>,
+ <code><a href=#meta>meta</a></code>, <code><a href=#the-nav-element>nav</a></code>, <code>noembed</code>,
+ <code>noframes</code>, <code><a href=#the-noscript-element>noscript</a></code>, <code><a href=#the-ol-element>ol</a></code>,
+ <code><a href=#the-p-element>p</a></code>, <code><a href=#the-param-element>param</a></code>, <code>plaintext</code>,
+ <code><a href=#the-pre-element>pre</a></code>, <code><a href=#script>script</a></code>, <code><a href=#the-section-element>section</a></code>,
+ <code><a href=#the-select-element>select</a></code>, <code>spacer</code>, <code><a href=#the-style-element>style</a></code>,
+ <code><a href=#the-tbody-element>tbody</a></code>, <code><a href=#the-textarea-element>textarea</a></code>, <code><a href=#the-tfoot-element>tfoot</a></code>,
+ <code><a href=#the-thead-element>thead</a></code>, <code><a href=#the-title-element>title</a></code>, <code><a href=#the-tr-element>tr</a></code>,
+ <code><a href=#the-ul-element>ul</a></code>, and <code>wbr</code>.</dd>
<dt><dfn id=scoping>Scoping</dfn></dt>
<dd><p>The following HTML elements introduce new <a href=#has-an-element-in-scope title="has
@@ -56301,8 +56338,8 @@ document.body.appendChild(text);
<!-- the normal ones -->
<dt>A start tag whose tag name is one of: "address", "article",
"aside", "blockquote", "center", "datagrid", "details", "dialog",
- "dir", "div", "dl", "fieldset", "figure", "footer", "hgroup",
- "menu", "nav", "ol", "p", "section", "ul"</dt>
+ "dir", "div", "dl", "fieldset", "figure", "footer", "header",
+ "hgroup", "menu", "nav", "ol", "p", "section", "ul"</dt>
<dd>
<!-- As of May 2008 this doesn't match any browser exactly, but is
@@ -56504,8 +56541,9 @@ document.body.appendChild(text);
<!-- the normal ones -->
<dt>An end tag whose tag name is one of: "address", "article",
"aside", "blockquote", "center", "datagrid", "details", "dialog",
- "dir", "div", "dl", "fieldset", "figure", "footer", "hgroup",
- "listing", "menu", "nav", "ol", "pre", "section", "ul"</dt>
+ "dir", "div", "dl", "fieldset", "figure", "footer", "header",
+ "hgroup", "listing", "menu", "nav", "ol", "pre", "section",
+ "ul"</dt>
<dd>
<p>If the <a href=#stack-of-open-elements>stack of open elements</a> does not <a href=#has-an-element-in-scope title="has an element in scope">have an element in scope</a>
View
132 source
@@ -13018,20 +13018,21 @@ not-slash = %x0000-002E / %x0030-%10FFFF
navigation section.</p>
<pre>&lt;body>
- <!--&lt;header>-->
+ &lt;header>
&lt;h1>Wake up sheeple!&lt;/h1>
&lt;p>&lt;a href="news.html">News&lt;/a> -
&lt;a href="blog.html">Blog&lt;/a> -
&lt;a href="forums.html">Forums&lt;/a>&lt;/p>
- <!--&lt;/header>-->
- &lt;nav>
- &lt;h1>Navigation&lt;/h1>
- &lt;ul>
- &lt;li>&lt;a href="articles.html">Index of all articles&lt;/a>&lt;/li>
- &lt;li>&lt;a href="today.html">Things sheeple need to wake up for today&lt;/a>&lt;/li>
- &lt;li>&lt;a href="successes.html">Sheeple we have managed to wake&lt;/a>&lt;/li>
- &lt;/ul>
- &lt;/nav>
+ &lt;p>Last Modified: &lt;time>2009-04-01&lt;/time>&lt;/p>
+ &lt;nav>
+ &lt;h1>Navigation&lt;/h1>
+ &lt;ul>
+ &lt;li>&lt;a href="articles.html">Index of all articles&lt;/a>&lt;/li>
+ &lt;li>&lt;a href="today.html">Things sheeple need to wake up for today&lt;/a>&lt;/li>
+ &lt;li>&lt;a href="successes.html">Sheeple we have managed to wake&lt;/a>&lt;/li>
+ &lt;/ul>
+ &lt;/nav>
+ &lt;/header>
&lt;article>
&lt;p>...<em>page content would be here</em>...&lt;/p>
&lt;/article>
@@ -13247,19 +13248,51 @@ isn't his only passion. He also enjoys other pleasures.&lt;/p>
&lt;h2&gt;Or: How I Learned to Stop Worrying and Love the Bomb&lt;/h2&gt;
&lt;/hgroup&gt;</pre>
-<!--
- The <code>header</code> element may contain more than just the
- section's headings and subheadings &mdash; for example it would be
- reasonable for the header to include version history information.
+ </div>
+
+
+ <h4>The <dfn><code>header</code></dfn> element</h4>
+
+ <dl class="element">
+ <dt>Categories</dt>
+ <dd><span>Flow content</span>.</dd>
+ <dt>Contexts in which this element may be used:</dt>
+ <dd>Where <span>flow content</span> is expected.</dd>
+ <dt>Content model:</dt>
+ <dd><span>Flow content</span>, but with no <code>header</code>
+ element descendants.</dd>
+ <dt>Content attributes:</dt>
+ <dd><span>Global attributes</span></dd>
+ <dt>DOM interface:</dt>
+ <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>Contact information for the section to which the
+ <code>header</code> element <a href="#applyToSection">applies</a>
+ should be marked up using the <code>address</code> element.</p>
+
+ <div class="example">
+
+ <p>Here are some sample headers. This first one is for a game:</p>
<pre>&lt;header&gt;
&lt;p&gt;Welcome to...&lt;/p&gt;
- &lt;h1&gt;<strong>Voidwars!</strong>&lt;/h1&gt;
+ &lt;h1&gt;Voidwars!&lt;/h1&gt;
&lt;/header&gt;</pre>
+ <p>The following snippet shows how the element can be used to mark
+ up a specification's heading:</p>
+
<pre>&lt;header&gt;
&lt;hgroup&gt;
- &lt;h1&gt;<strong>Scalable Vector Graphics (SVG) 1.2</strong>&lt;/h1&gt;
+ &lt;h1&gt;Scalable Vector Graphics (SVG) 1.2&lt;/h1&gt;
&lt;h2&gt;W3C Working Draft 27 October 2004&lt;/h2&gt;
&lt;/hgroup&gt;
&lt;dl&gt;
@@ -13278,10 +13311,12 @@ isn't his only passion. He also enjoys other pleasures.&lt;/p>
&lt;/dl&gt;
&lt;p class="copyright"&gt;&lt;a href="http://www.w3.org/Consortium/Legal/ipr-notic <em>...</em>
&lt;/header&gt;</pre>
--->
+
</div>
+
+
<h4>The <dfn><code>footer</code></dfn> element</h4>
<dl class="element">
@@ -13305,13 +13340,19 @@ isn't his only passion. He also enjoys other pleasures.&lt;/p>
wrote it, links to related documents, copyright data, and the
like.</p>
- <p>Contact information for the section given in a
- <code>footer</code> should be marked up using the
- <code>address</code> element.</p>
+ <p>Contact information for the section to which the
+ <code>footer</code> element <a href="#applyToSection">applies</a>
+ should be marked up using the <code>address</code> element.</p>
<p>Footers don't necessarily have to appear at the end of a section,
though they usually do.</p>
+ <p>The <code>footer</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>section</code> elements
+ should be used, not a <code>footer</code>.</p>
+
<div class="example">
<p>Here is a page with two footers, one at the top and one at the
@@ -18768,7 +18809,6 @@ document.write(), passes data to the Tokenizer."></strong>&lt;/p></pre>
cases, an equivalent textual label must be given in the <code
title="attr-img-alt">alt</code> attribute.</p>
-<!--
<div class="example">
<p>Here, posts on a news site are labeled with an icon
@@ -18796,7 +18836,6 @@ document.write(), passes data to the Tokenizer."></strong>&lt;/p></pre>
&lt;/body></pre>
</div>
--->
<p>Many pages include logos, insignia, flags, or emblems, which
stand for a particular entity such as a company, organization,
@@ -64737,12 +64776,12 @@ interface <dfn>MessagePort</dfn> {
<code>div</code>, <code>dl</code>, <code>fieldset</code>,
<code>footer</code>, <code>form</code>, <code>h1</code>,
<code>h2</code>, <code>h3</code>, <code>h4</code>, <code>h5</code>,
- <code>h6</code>, <code>hgroup</code>, <code>hr</code>,
- <code>menu</code>, <code>nav</code>, <code>ol</code>,
- <code>p</code>, <code>pre</code>, <code>section</code>,
- <code>table</code>, or <code>ul</code>, element, or if there is no
- more content in the parent element and the parent element is not an
- <code>a</code> element.</p>
+ <code>h6</code>, <code>header</code>, <code>hgroup</code>,
+ <code>hr</code>, <code>menu</code>, <code>nav</code>,
+ <code>ol</code>, <code>p</code>, <code>pre</code>,
+ <code>section</code>, <code>table</code>, or <code>ul</code>,
+ element, or if there is no more content in the parent element and
+ the parent element is not an <code>a</code> element.</p>
<!-- </rt> -->
<p>An <code>rt</code> element's <span title="syntax-end-tag">end
@@ -65982,20 +66021,20 @@ interface <dfn>MessagePort</dfn> {
<code>footer</code>, <code>form</code>, <code>frame</code>,
<code>frameset</code>, <code>h1</code>, <code>h2</code>,
<code>h3</code>, <code>h4</code>, <code>h5</code>, <code>h6</code>,
- <code>head</code>, <code>hgroup</code>, <code>hr</code>,
- <code>iframe</code>, <!-- <code>image</code>, (commented out
- because this isn't an element that can end up on the stack, so it
- doesn't matter) --> <code>img</code>, <code>input</code>,
- <code>isindex</code>, <code>li</code>, <code>link</code>,
- <code>listing</code>, <code>menu</code>, <code>meta</code>,
- <code>nav</code>, <code>noembed</code>, <code>noframes</code>,
- <code>noscript</code>, <code>ol</code>, <code>p</code>,
- <code>param</code>, <code>plaintext</code>, <code>pre</code>,
- <code>script</code>, <code>section</code>, <code>select</code>,
- <code>spacer</code>, <code>style</code>, <code>tbody</code>,
- <code>textarea</code>, <code>tfoot</code>, <code>thead</code>,
- <code>title</code>, <code>tr</code>, <code>ul</code>, and
- <code>wbr</code>.</p></dd>
+ <code>head</code>, <code>header</code>, <code>hgroup</code>,
+ <code>hr</code>, <code>iframe</code>, <!-- <code>image</code>,
+ (commented out because this isn't an element that can end up on the
+ stack, so it doesn't matter) --> <code>img</code>,
+ <code>input</code>, <code>isindex</code>, <code>li</code>,
+ <code>link</code>, <code>listing</code>, <code>menu</code>,
+ <code>meta</code>, <code>nav</code>, <code>noembed</code>,
+ <code>noframes</code>, <code>noscript</code>, <code>ol</code>,
+ <code>p</code>, <code>param</code>, <code>plaintext</code>,
+ <code>pre</code>, <code>script</code>, <code>section</code>,
+ <code>select</code>, <code>spacer</code>, <code>style</code>,
+ <code>tbody</code>, <code>textarea</code>, <code>tfoot</code>,
+ <code>thead</code>, <code>title</code>, <code>tr</code>,
+ <code>ul</code>, and <code>wbr</code>.</p></dd>
<dt><dfn>Scoping</dfn></dt>
<dd><p>The following HTML elements introduce new <span title="has
@@ -68937,8 +68976,8 @@ document.body.appendChild(text);
<!-- the normal ones -->
<dt>A start tag whose tag name is one of: "address", "article",
"aside", "blockquote", "center", "datagrid", "details", "dialog",
- "dir", "div", "dl", "fieldset", "figure", "footer", "hgroup",
- "menu", "nav", "ol", "p", "section", "ul"</dt>
+ "dir", "div", "dl", "fieldset", "figure", "footer", "header",
+ "hgroup", "menu", "nav", "ol", "p", "section", "ul"</dt>
<dd>
<!-- As of May 2008 this doesn't match any browser exactly, but is
@@ -69148,8 +69187,9 @@ document.body.appendChild(text);
<!-- the normal ones -->
<dt>An end tag whose tag name is one of: "address", "article",
"aside", "blockquote", "center", "datagrid", "details", "dialog",
- "dir", "div", "dl", "fieldset", "figure", "footer", "hgroup",
- "listing", "menu", "nav", "ol", "pre", "section", "ul"</dt>
+ "dir", "div", "dl", "fieldset", "figure", "footer", "header",
+ "hgroup", "listing", "menu", "nav", "ol", "pre", "section",
+ "ul"</dt>
<dd>
<p>If the <span>stack of open elements</span> does not <span

0 comments on commit a729fd0

Please sign in to comment.