Skip to content

Commit

Permalink
[ac] (0) Introduce a new <header> element.
Browse files Browse the repository at this point in the history 
git-svn-id: http://svn.whatwg.org/webapps@3040 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information
@Hixie
Hixie committed Apr 30, 2009
1 parent 7e9b2d1 commit a729fd0
Show file tree
Hide file tree
Showing 2 changed files with 199 additions and 121 deletions.
188 changes: 113 additions & 75 deletions index
View file
Expand Up @@ -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>
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand All @@ -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>
Expand All @@ -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
Expand All @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>

Expand Down Expand Up @@ -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>

Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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>
Expand Down

0 comments on commit a729fd0

Please sign in to comment.