HTML Standard Tracker

Filter

File a bug

SVNBugCommentTime (UTC)
3040[Authors] [Conformance Checkers] Introduce a new <header> element.2009-04-30 18:07
@@ -13011,34 +13011,35 @@ not-slash     = %x0000-002E / %x0030-%10FFFF
   have a list of links to various key parts of a site, but the
   <code>footer</code> element is more appropriate in such cases.</p>
 
   <div class="example">
 
    <p>In the following example, the page has several places where
    links are present, but only one of those places is considered a
    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>
  &lt;footer>
   &lt;p>Copyright &copy; 2006 The Example Company&lt;/p>
   &lt;p>&lt;a href="about.html">About&lt;/a> -
      &lt;a href="policy.html">Privacy Policy&lt;/a> -
      &lt;a href="contact.html">Contact Us&lt;/a>&lt;/p>
  &lt;/footer>
 &lt;/body></pre>
@@ -13240,55 +13241,89 @@ isn't his only passion. He also enjoys other pleasures.&lt;/p>
    <pre>&lt;hgroup&gt;
  &lt;h1&gt;<strong>The reality dysfunction</strong>&lt;/h1&gt;
  &lt;h2&gt;Space is not the only void&lt;/h2&gt;
 &lt;/hgroup&gt;</pre>
 
    <pre>&lt;hgroup&gt;
  &lt;h1&gt;<strong>Dr. Strangelove</strong>&lt;/h1&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>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;
   &lt;dt&gt;This version:&lt;/dt&gt;
   &lt;dd&gt;&lt;a href="http://www.w3.org/TR/2004/WD-SVG12-20041027/"&gt;http://www.w3.org/TR/2004/WD-SVG12-20041027/&lt;/a&gt;&lt;/dd&gt;
   &lt;dt&gt;Previous version:&lt;/dt&gt;
   &lt;dd&gt;&lt;a href="http://www.w3.org/TR/2004/WD-SVG12-20040510/"&gt;http://www.w3.org/TR/2004/WD-SVG12-20040510/&lt;/a&gt;&lt;/dd&gt;
   &lt;dt&gt;Latest version of SVG 1.2:&lt;/dt&gt;
   &lt;dd&gt;&lt;a href="http://www.w3.org/TR/SVG12/"&gt;http://www.w3.org/TR/SVG12/&lt;/a&gt;&lt;/dd&gt;
   &lt;dt&gt;Latest SVG Recommendation:&lt;/dt&gt;
   &lt;dd&gt;&lt;a href="http://www.w3.org/TR/SVG/"&gt;http://www.w3.org/TR/SVG/&lt;/a&gt;&lt;/dd&gt;
   &lt;dt&gt;Editor:&lt;/dt&gt;
   &lt;dd&gt;Dean Jackson, W3C, &lt;a href="mailto:dean@w3.org"&gt;dean@w3.org&lt;/a&gt;&lt;/dd&gt;
   &lt;dt&gt;Authors:&lt;/dt&gt;
   &lt;dd&gt;See &lt;a href="#authors"&gt;Author List&lt;/a&gt;&lt;/dd&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>The <dfn><code>footer</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 <span>heading
    content</span> descendants, no <span>sectioning content</span>
@@ -13298,27 +13333,33 @@ isn't his only passion. He also enjoys other pleasures.&lt;/p>
    <dt>DOM interface:</dt>
    <dd>Uses <code>HTMLElement</code>.</dd>
   </dl>
 
   <p>The <code>footer</code> element <span>represents</span> a footer
   for the section it <a href="#applyToSection">applies</a> to. A
   footer typically contains information about its section such as who
   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
    bottom, with the same content:</p>
 
    <pre>&lt;body>
  &lt;footer>&lt;a href="../">Back to index...&lt;/a>&lt;/footer>
  &lt;hgroup>
   &lt;h1>Lorem ipsum&lt;/h1>
   &lt;h2>The ipsum of all lorems&lt;/h2>
@@ -18761,21 +18802,20 @@ document.write(), passes data to the Tokenizer."></strong>&lt;/p></pre>
  Configuration Tools&lt;/a>&lt;/p>
 &lt;/nav></pre>
 
   </div>
 
   <p>In other cases, the icon has no text next to it describing what
   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">alt</code> attribute.</p>
 
-<!--
   <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>
@@ -18789,21 +18829,20 @@ document.write(), passes data to the Tokenizer."></strong>&lt;/p></pre>
    &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
   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>
 
   </div>
--->
 
   <p>Many pages include logos, insignia, flags, or emblems, which
   stand for a particular entity such as a company, organization,
   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">alt</code> attribute must
   contain the name of the entity being represented by the logo. The
   <code title="attr-img-alt">alt</code> attribute must <em>not</em>
   contain text like the word "logo", as it is not the fact that it is
@@ -64730,26 +64769,26 @@ interface <dfn>MessagePort</dfn> {
 
   <!-- </p> -->
   <p>A <code>p</code> element's <span title="syntax-end-tag">end
   tag</span> may be omitted if the <code>p</code> element is
   immediately followed by an <code>address</code>,
   <code>article</code>, <code>aside</code>, <code>blockquote</code>,
   <code>datagrid</code>, <code>dialog</code>, <code>dir</code>,
   <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
   tag</span> may be omitted if the <code>rt</code> element is
   immediately followed by an <code>rt</code> or <code>rp</code>
   element, or if there is no more content in the parent element.</p>
 
   <!-- </rp> -->
   <p>An <code>rp</code> element's <span title="syntax-end-tag">end
   tag</span> may be omitted if the <code>rp</code> element is
@@ -65975,34 +66014,34 @@ interface <dfn>MessagePort</dfn> {
    <code>basefont</code>, <code>bgsound</code>,
    <code>blockquote</code>, <code>body</code>, <code>br</code>,
    <code>center</code>, <code>col</code>, <code>colgroup</code>,
    <code>command</code>, <code>datagrid</code>, <code>dd</code>,
    <code>details</code>, <code>dialog</code>, <code>dir</code>,
    <code>div</code>, <code>dl</code>, <code>dt</code>,
    <code>embed</code>, <code>fieldset</code>, <code>figure</code>,
    <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
    an element in scope">scopes</span> for various parts of the
    parsing: <code>applet</code>, <code>button</code>,
    <code>caption</code>, <code>html</code>, <code>marquee</code>,
    <code>object</code>, <code>table</code>, <code>td</code>,
    <code>th</code>, and SVG's <code>foreignObject</code>.</p></dd>
 
    <dt><dfn>Formatting</dfn></dt>
@@ -68930,22 +68969,22 @@ document.body.appendChild(text);
     <p class="note">The fake end tag token here can only be
     ignored in the <span>fragment case</span>.</p>
 
    </dd>
 
    <!-- start tags for non-phrasing flow content elements -->
 
    <!-- 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
     as close to what IE does as I can get without doing the non-tree
     DOM nonsense, and thus should actually afford better compatibility
     when implemented by the other browsers. -->
 
     <p>If the <span>stack of open elements</span> <span title="has
     an element in scope">has a <code>p</code> element in
     scope</span>, then act as if an end tag with the tag name
@@ -69141,22 +69180,23 @@ document.body.appendChild(text);
     there is no way to switch the <span>content model flag</span>
     out of the PLAINTEXT state.</p>
 
    </dd>
 
    <!-- end tags for non-phrasing flow content elements -->
 
    <!-- 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
     title="has an element in scope">have an element in scope</span>
     with the same tag name as that of the token, then this is a
     <span>parse error</span>; ignore the token.</p>
 
     <p>Otherwise, run these steps:</p>
 
     <ol>

|