Bugzilla – Bug 553
Introduce a new <header> element.
Last modified: 2009-05-27 14:43:16 CEST
Index: source =================================================================== --- source (revision 3039) +++ source (revision 3040) @@ -13018,20 +13018,21 @@ navigation section.</p> <pre><body> - <!--<header>--> + <header> <h1>Wake up sheeple!</h1> <p><a href="news.html">News</a> - <a href="blog.html">Blog</a> - <a href="forums.html">Forums</a></p> - <!--</header>--> - <nav> - <h1>Navigation</h1> - <ul> - <li><a href="articles.html">Index of all articles</a></li> - <li><a href="today.html">Things sheeple need to wake up for today</a></li> - <li><a href="successes.html">Sheeple we have managed to wake</a></li> - </ul> - </nav> + <p>Last Modified: <time>2009-04-01</time></p> + <nav> + <h1>Navigation</h1> + <ul> + <li><a href="articles.html">Index of all articles</a></li> + <li><a href="today.html">Things sheeple need to wake up for today</a></li> + <li><a href="successes.html">Sheeple we have managed to wake</a></li> + </ul> + </nav> + </header> <article> <p>...<em>page content would be here</em>...</p> </article> @@ -13247,19 +13248,51 @@ <h2>Or: How I Learned to Stop Worrying and Love the Bomb</h2> </hgroup></pre> -<!-- - The <code>header</code> element may contain more than just the - section's headings and subheadings — 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>–<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><header> <p>Welcome to...</p> - <h1><strong>Voidwars!</strong></h1> + <h1>Voidwars!</h1> </header></pre> + <p>The following snippet shows how the element can be used to mark + up a specification's heading:</p> + <pre><header> <hgroup> - <h1><strong>Scalable Vector Graphics (SVG) 1.2</strong></h1> + <h1>Scalable Vector Graphics (SVG) 1.2</h1> <h2>W3C Working Draft 27 October 2004</h2> </hgroup> <dl> @@ -13278,10 +13311,12 @@ </dl> <p class="copyright"><a href="http://www.w3.org/Consortium/Legal/ipr-notic <em>...</em> </header></pre> ---> + </div> + + <h4>The <dfn><code>footer</code></dfn> element</h4> <dl class="element"> @@ -13305,13 +13340,19 @@ 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 @@ 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 @@ </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 @@ <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 @@ <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 @@ <!-- 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 @@ <!-- 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
Not bothering to search dupes.