[html5] r7404 - [e] (0) Try adding a usage summary for the section elements. Fixing https://www. [...]
whatwg at whatwg.org
whatwg at whatwg.org
Tue Sep 25 17:02:02 PDT 2012
Author: ianh
Date: 2012-09-25 17:02:01 -0700 (Tue, 25 Sep 2012)
New Revision: 7404
Modified:
complete.html
index
source
Log:
[e] (0) Try adding a usage summary for the section elements.
Fixing https://www.w3.org/Bugs/Public/show_bug.cgi?id=17069
Affected topics: DOM APIs, HTML
Modified: complete.html
===================================================================
--- complete.html 2012-09-25 04:30:10 UTC (rev 7403)
+++ complete.html 2012-09-26 00:02:01 UTC (rev 7404)
@@ -472,9 +472,9 @@
<li><a href=#sections><span class=secno>4.4 </span>Sections</a>
<ol>
<li><a href=#the-body-element><span class=secno>4.4.1 </span>The <code>body</code> element</a></li>
- <li><a href=#the-section-element><span class=secno>4.4.2 </span>The <code>section</code> element</a></li>
- <li><a href=#the-nav-element><span class=secno>4.4.3 </span>The <code>nav</code> element</a></li>
- <li><a href=#the-article-element><span class=secno>4.4.4 </span>The <code>article</code> element</a></li>
+ <li><a href=#the-article-element><span class=secno>4.4.2 </span>The <code>article</code> element</a></li>
+ <li><a href=#the-section-element><span class=secno>4.4.3 </span>The <code>section</code> element</a></li>
+ <li><a href=#the-nav-element><span class=secno>4.4.4 </span>The <code>nav</code> element</a></li>
<li><a href=#the-aside-element><span class=secno>4.4.5 </span>The <code>aside</code> element</a></li>
<li><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements><span class=secno>4.4.6 </span>The <code>h1</code>, <code>h2</code>, <code>h3</code>, <code>h4</code>, <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>
@@ -483,7 +483,8 @@
<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.11.1 </span>Creating an outline</a></ol></ol></li>
+ <li><a href=#outlines><span class=secno>4.4.11.1 </span>Creating an outline</a></ol></li>
+ <li><a href=#usage-summary-0><span class=secno>4.4.12 </span>Usage summary</a></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>
@@ -18039,7 +18040,7 @@
- <h4 id=the-section-element><span class=secno>4.4.2 </span>The <dfn><code>section</code></dfn> element</h4>
+ <h4 id=the-article-element><span class=secno>4.4.2 </span>The <dfn><code>article</code></dfn> element</h4>
<dl class=element><dt><a href=#element-dfn-categories title=element-dfn-categories>Categories</a>:</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
@@ -18053,6 +18054,115 @@
<dd><a href=#global-attributes>Global attributes</a></dd>
<dt><a href=#element-dfn-dom title=element-dfn-dom>DOM interface</a>:</dt><!--TOPIC:DOM APIs-->
<dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
+ </dl><!--TOPIC:HTML--><p>The <code><a href=#the-article-element>article</a></code> element <a href=#represents>represents</a> a
+ self-contained composition in a document, page, application, or site
+ and that is, in principle, independently distributable or reusable,
+ e.g. in syndication. This could be a forum post, a magazine or
+ newspaper article, a blog entry, a user-submitted comment, an
+ interactive widget or gadget, or any other independent item of
+ content.</p>
+
+ <p>When <code><a href=#the-article-element>article</a></code> elements are nested, the inner
+ <code><a href=#the-article-element>article</a></code> elements represent articles that are in
+ principle related to the contents of the outer article. For
+ instance, a blog entry on a site that accepts user-submitted
+ comments could represent the comments as <code><a href=#the-article-element>article</a></code>
+ elements nested within the <code><a href=#the-article-element>article</a></code> element for the blog
+ entry.</p>
+
+ <p>Author information associated with an <code><a href=#the-article-element>article</a></code>
+ element (q.v. the <code><a href=#the-address-element>address</a></code> element) does not apply to
+ nested <code><a href=#the-article-element>article</a></code> elements.</p>
+
+ <p class=note>When used specifically with content to be
+ redistributed in syndication, the <code><a href=#the-article-element>article</a></code> element is
+ similar in purpose to the <code title="">entry</code> element in
+ Atom. <a href=#refsATOM>[ATOM]</a>
+
+ <p class=note>The schema.org microdata vocabulary can be used to
+ provide the publication date for an <code><a href=#the-article-element>article</a></code>
+ element, using one of the CreativeWork subtypes.</p>
+
+ <div class=example id=article-example>
+
+ <p>This example shows a blog post using the <code><a href=#the-article-element>article</a></code>
+ element, with some schema.org annotations:</p>
+
+ <pre><article itemscope itemtype="http://schema.org/BlogPosting">
+ <header>
+ <h1 itemprop="headline">The Very First Rule of Life</h1>
+ <p><time itemprop="datePublished" datetime="2009-10-09">3 days ago</time></p>
+ <link itemprop="url" href="?comments=0">
+ </header>
+ <p>If there's a microphone anywhere near you, assume it's hot and
+ sending whatever you're saying to the world. Seriously.</p>
+ <p><em>...</em></p>
+ <footer>
+ <a itemprop="discussionUrl" href="?comments=1">Show comments...</a>
+ </footer>
+</article></pre>
+
+ <p>Here is that same blog post, but showing some of the comments:</p>
+
+ <pre><article itemscope itemtype="http://schema.org/BlogPosting">
+ <header>
+ <h1 itemprop="headline">The Very First Rule of Life</h1>
+ <p><time itemprop="datePublished" datetime="2009-10-09">3 days ago</time></p>
+ <link itemprop="url" href="?comments=0">
+ </header>
+ <p>If there's a microphone anywhere near you, assume it's hot and
+ sending whatever you're saying to the world. Seriously.</p>
+ <p><em>...</em></p>
+ <section>
+ <h1>Comments</h1>
+ <article itemprop="comment" itemscope itemtype="http://schema.org/UserComments" id="c1">
+ <link itemprop="url" href="#c1">
+ <footer>
+ <p>Posted by: <span itemprop="creator" itemscope itemtype="http://schema.org/Person">
+ <span itemprop="name">George Washington</span>
+ </span></p>
+ <p><time itemprop="commentTime" datetime="2009-10-10">15 minutes ago</time></p>
+ </footer>
+ <p>Yeah! Especially when talking about your lobbyist friends!</p>
+ </article>
+ <article itemprop="comment" itemscope itemtype="http://schema.org/UserComments" id="c2">
+ <link itemprop="url" href="#c2">
+ <footer>
+ <p>Posted by: <span itemprop="creator" itemscope itemtype="http://schema.org/Person">
+ <span itemprop="name">George Hammond</span>
+ </span></p>
+ <p><time itemprop="commentTime" datetime="2009-10-10">5 minutes ago</time></p>
+ </footer>
+ <p>Hey, you have the same first name as me.</p>
+ </article>
+ </section>
+</article></pre>
+
+ <p>Notice the use of <code><a href=#the-footer-element>footer</a></code> to give the information
+ for each comment (such as who wrote it and when): the
+ <code><a href=#the-footer-element>footer</a></code> element <em>can</em> appear at the start of its
+ section when appropriate, such as in this case. (Using
+ <code><a href=#the-header-element>header</a></code> in this case wouldn't be wrong either; it's
+ mostly a matter of authoring preference.)</p>
+
+ </div>
+
+
+
+ <h4 id=the-section-element><span class=secno>4.4.3 </span>The <dfn><code>section</code></dfn> element</h4>
+
+ <dl class=element><dt><a href=#element-dfn-categories title=element-dfn-categories>Categories</a>:</dt>
+ <dd><a href=#flow-content>Flow content</a>.</dd>
+ <dd><a href=#sectioning-content>Sectioning content</a>.</dd>
+ <dd><a href=#palpable-content>Palpable content</a>.</dd>
+ <dt><a href=#element-dfn-contexts title=element-dfn-contexts>Contexts in which this element can be used</a>:</dt>
+ <dd>Where <a href=#flow-content>flow content</a> is expected.</dd>
+ <dt><a href=#element-dfn-content-model title=element-dfn-content-model>Content model</a>:</dt>
+ <dd><a href=#flow-content>Flow content</a>.</dd>
+ <dt><a href=#element-dfn-attributes title=element-dfn-attributes>Content attributes</a>:</dt>
+ <dd><a href=#global-attributes>Global attributes</a></dd>
+ <dt><a href=#element-dfn-dom title=element-dfn-dom>DOM interface</a>:</dt><!--TOPIC:DOM APIs-->
+ <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
</dl><!--TOPIC:HTML--><p>The <code><a href=#the-section-element>section</a></code> element <a href=#represents>represents</a> a
generic section of a document or application. A section, in this
context, is a thematic grouping of content, typically with a
@@ -18210,7 +18320,7 @@
- <h4 id=the-nav-element><span class=secno>4.4.3 </span>The <dfn><code>nav</code></dfn> element</h4>
+ <h4 id=the-nav-element><span class=secno>4.4.4 </span>The <dfn><code>nav</code></dfn> element</h4>
<dl class=element><dt><a href=#element-dfn-categories title=element-dfn-categories>Categories</a>:</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
@@ -18377,116 +18487,7 @@
</div>
- <h4 id=the-article-element><span class=secno>4.4.4 </span>The <dfn><code>article</code></dfn> element</h4>
- <dl class=element><dt><a href=#element-dfn-categories title=element-dfn-categories>Categories</a>:</dt>
- <dd><a href=#flow-content>Flow content</a>.</dd>
- <dd><a href=#sectioning-content>Sectioning content</a>.</dd>
- <dd><a href=#palpable-content>Palpable content</a>.</dd>
- <dt><a href=#element-dfn-contexts title=element-dfn-contexts>Contexts in which this element can be used</a>:</dt>
- <dd>Where <a href=#flow-content>flow content</a> is expected.</dd>
- <dt><a href=#element-dfn-content-model title=element-dfn-content-model>Content model</a>:</dt>
- <dd><a href=#flow-content>Flow content</a>.</dd>
- <dt><a href=#element-dfn-attributes title=element-dfn-attributes>Content attributes</a>:</dt>
- <dd><a href=#global-attributes>Global attributes</a></dd>
- <dt><a href=#element-dfn-dom title=element-dfn-dom>DOM interface</a>:</dt><!--TOPIC:DOM APIs-->
- <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
- </dl><!--TOPIC:HTML--><p>The <code><a href=#the-article-element>article</a></code> element <a href=#represents>represents</a> a
- self-contained composition in a document, page, application, or site
- and that is, in principle, independently distributable or reusable,
- e.g. in syndication. This could be a forum post, a magazine or
- newspaper article, a blog entry, a user-submitted comment, an
- interactive widget or gadget, or any other independent item of
- content.</p>
-
- <p>When <code><a href=#the-article-element>article</a></code> elements are nested, the inner
- <code><a href=#the-article-element>article</a></code> elements represent articles that are in
- principle related to the contents of the outer article. For
- instance, a blog entry on a site that accepts user-submitted
- comments could represent the comments as <code><a href=#the-article-element>article</a></code>
- elements nested within the <code><a href=#the-article-element>article</a></code> element for the blog
- entry.</p>
-
- <p>Author information associated with an <code><a href=#the-article-element>article</a></code>
- element (q.v. the <code><a href=#the-address-element>address</a></code> element) does not apply to
- nested <code><a href=#the-article-element>article</a></code> elements.</p>
-
- <p class=note>When used specifically with content to be
- redistributed in syndication, the <code><a href=#the-article-element>article</a></code> element is
- similar in purpose to the <code title="">entry</code> element in
- Atom. <a href=#refsATOM>[ATOM]</a>
-
- <p class=note>The schema.org microdata vocabulary can be used to
- provide the publication date for an <code><a href=#the-article-element>article</a></code>
- element, using one of the CreativeWork subtypes.</p>
-
- <div class=example id=article-example>
-
- <p>This example shows a blog post using the <code><a href=#the-article-element>article</a></code>
- element, with some schema.org annotations:</p>
-
- <pre><article itemscope itemtype="http://schema.org/BlogPosting">
- <header>
- <h1 itemprop="headline">The Very First Rule of Life</h1>
- <p><time itemprop="datePublished" datetime="2009-10-09">3 days ago</time></p>
- <link itemprop="url" href="?comments=0">
- </header>
- <p>If there's a microphone anywhere near you, assume it's hot and
- sending whatever you're saying to the world. Seriously.</p>
- <p><em>...</em></p>
- <footer>
- <a itemprop="discussionUrl" href="?comments=1">Show comments...</a>
- </footer>
-</article></pre>
-
- <p>Here is that same blog post, but showing some of the comments:</p>
-
- <pre><article itemscope itemtype="http://schema.org/BlogPosting">
- <header>
- <h1 itemprop="headline">The Very First Rule of Life</h1>
- <p><time itemprop="datePublished" datetime="2009-10-09">3 days ago</time></p>
- <link itemprop="url" href="?comments=0">
- </header>
- <p>If there's a microphone anywhere near you, assume it's hot and
- sending whatever you're saying to the world. Seriously.</p>
- <p><em>...</em></p>
- <section>
- <h1>Comments</h1>
- <article itemprop="comment" itemscope itemtype="http://schema.org/UserComments" id="c1">
- <link itemprop="url" href="#c1">
- <footer>
- <p>Posted by: <span itemprop="creator" itemscope itemtype="http://schema.org/Person">
- <span itemprop="name">George Washington</span>
- </span></p>
- <p><time itemprop="commentTime" datetime="2009-10-10">15 minutes ago</time></p>
- </footer>
- <p>Yeah! Especially when talking about your lobbyist friends!</p>
- </article>
- <article itemprop="comment" itemscope itemtype="http://schema.org/UserComments" id="c2">
- <link itemprop="url" href="#c2">
- <footer>
- <p>Posted by: <span itemprop="creator" itemscope itemtype="http://schema.org/Person">
- <span itemprop="name">George Hammond</span>
- </span></p>
- <p><time itemprop="commentTime" datetime="2009-10-10">5 minutes ago</time></p>
- </footer>
- <p>Hey, you have the same first name as me.</p>
- </article>
- </section>
-</article></pre>
-
- <p>Notice the use of <code><a href=#the-footer-element>footer</a></code> to give the information
- for each comment (such as who wrote it and when): the
- <code><a href=#the-footer-element>footer</a></code> element <em>can</em> appear at the start of its
- section when appropriate, such as in this case. (Using
- <code><a href=#the-header-element>header</a></code> in this case wouldn't be wrong either; it's
- mostly a matter of authoring preference.)</p>
-
- </div>
-
-
-
-
<h4 id=the-aside-element><span class=secno>4.4.5 </span>The <dfn><code>aside</code></dfn> element</h4>
<dl class=element><dt><a href=#element-dfn-categories title=element-dfn-categories>Categories</a>:</dt>
@@ -19676,8 +19677,112 @@
- <h3 id=grouping-content><span class=secno>4.5 </span>Grouping content</h3>
+ <h4 id=usage-summary-0><span class=secno>4.4.12 </span>Usage summary</h4>
+ <p><i>This section is non-normative.</i></p>
+
+ <table><thead><tr><th rowspan=2>Element
+ <th>Purpose
+ <tr><th>Example
+ <tbody><tr><td rowspan=2><code><a href=#the-body-element>body</a></code>
+ <td>The main content of the document.
+ <tr><td><pre class=example><!DOCTYPE HTML>
+<html>
+ <head> <title>Steve Hill's Home Page</title> </head>
+ <strong><body></strong> <p>Hard Trance is My Life.</p> <strong></body></strong>
+</html></pre>
+
+ <tr><td rowspan=2><code><a href=#the-article-element>article</a></code>
+ <td>A self-contained composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
+ <tr><td><pre class=example><strong><article></strong>
+ <img src="/tumblr_masqy2s5yn1rzfqbpo1_500.jpg" alt="Yellow smiley face with the caption 'masif'">
+ <p>My fave Masif tee so far!</p>
+ <footer>Posted 2 days ago</footer>
+<strong></article></strong>
+<strong><article></strong>
+ <img src="/tumblr_m9tf6wSr6W1rzfqbpo1_500.jpg" alt="">
+ <p>Happy 2nd birthday Masif Saturdays!!!</p>
+ <footer>Posted 3 weeks ago</footer>
+<strong></article></strong></pre>
+
+ <tr><td rowspan=2><code><a href=#the-section-element>section</a></code>
+ <td>A generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.
+ <tr><td><pre class=example><h1>Biography</h1>
+<strong><section></strong>
+ <h1>The facts</h1>
+ <p>1500+ shows, 14+ countries</p>
+<strong></section></strong>
+<strong><section></strong>
+ <h1>2010/2011 figures per year</h1>
+ <p>100+ shows, 8+ countries</p>
+<strong></section></strong></pre>
+
+ <tr><td rowspan=2><code><a href=#the-nav-element>nav</a></code>
+ <td>A section of a page that links to other pages or to parts within the page: a section with navigation links.
+ <tr><td><pre class=example><strong><nav></strong>
+ <p><a href="/">Home</a>
+ <p><a href="/biog.html">Bio</a>
+ <p><a href="/discog.html">Discog</a>
+<strong></nav></strong></pre>
+
+ <tr><td rowspan=2><code><a href=#the-aside-element>aside</a></code>
+ <td>A section of a page that consists of content that is tangentially related to the content around the <code><a href=#the-aside-element>aside</a></code> element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.
+ <tr><td><pre class=example><h1>Music</h1>
+<p>As any burner can tell you, the event has a lot of trance.</p>
+<strong><aside></strong>You can buy the music we played at our <a href="buy.html">playlist page</a>.<strong></aside></strong>
+<p>This year we played a kind of trance that originated in Belgium, Germany, and the Netherlands in the mid 90s.</p></pre>
+
+ <tr><td rowspan=2><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>h6</a></code>
+ <td>A section heading
+ <tr><td><pre class=example><strong><h1></strong>The Guide To Music On The Playa<strong></h1></strong>
+<strong><h2></strong>The Main Stage<strong></h2></strong>
+<p>If you want to play on a stage, you should bring one.</p>
+<strong><h2></strong>Amplified Music<strong></h2></strong>
+<p>Amplifiers up to 300W or 90dB are welcome.</p></pre>
+
+ <tr><td rowspan=2><code><a href=#the-hgroup-element>hgroup</a></code>
+ <td>The heading 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>–<code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h6</a></code> elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines.
+ <tr><td><pre class=example><strong><hgroup></strong>
+ <h1>Burning Music</h1>
+ <h2>The Guide To Music On The Playa</h2>
+<strong></hgroup></strong>
+<section>
+ <strong><hgroup></strong>
+ <h1>Main Stage</h1>
+ <h2>The Fiction Of A Music Festival</h2>
+ <strong></hgroup></strong>
+ <p>If you want to play on a stage, you should bring one.</p>
+</section>
+<section>
+ <strong><hgroup></strong>
+ <h1>Loudness!</h1>
+ <h2>Questions About Amplified Music</h2>
+ <strong></hgroup></strong>
+ <p>Amplifiers up to 300W or 90dB are welcome.</p>
+</section></pre>
+
+ <tr><td rowspan=2><code><a href=#the-header-element>header</a></code>
+ <td>A group of introductory or navigational aids.
+ <tr><td><pre class=example><article>
+ <strong><header></strong>
+ <h1>Hard Trance is My Life</h1>
+ <p>By DJ Steve Hill and Technikal</p>
+ <strong></header></strong>
+ <p>The album with the amusing punctuation has red artwork.</p>
+</article></pre>
+
+ <tr><td rowspan=2><code><a href=#the-footer-element>footer</a></code>
+ <td>A footer for its nearest ancestor <a href=#sectioning-content>sectioning content</a> or <a href=#sectioning-root>sectioning root</a> element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.
+ <tr><td><pre class=example><article>
+ <h1>Hard Trance is My Life</h1>
+ <p>The album with the amusing punctuation has red artwork.</p>
+ <strong><footer></strong>
+ <p>Artists: DJ Steve Hill and Technikal</p>
+ <strong></footer></strong>
+</article></pre>
+
+ </table><h3 id=grouping-content><span class=secno>4.5 </span>Grouping content</h3>
+
<h4 id=the-p-element><span class=secno>4.5.1 </span>The <dfn><code>p</code></dfn> element</h4>
<dl class=element><dt><a href=#element-dfn-categories title=element-dfn-categories>Categories</a>:</dt>
Modified: index
===================================================================
--- index 2012-09-25 04:30:10 UTC (rev 7403)
+++ index 2012-09-26 00:02:01 UTC (rev 7404)
@@ -472,9 +472,9 @@
<li><a href=#sections><span class=secno>4.4 </span>Sections</a>
<ol>
<li><a href=#the-body-element><span class=secno>4.4.1 </span>The <code>body</code> element</a></li>
- <li><a href=#the-section-element><span class=secno>4.4.2 </span>The <code>section</code> element</a></li>
- <li><a href=#the-nav-element><span class=secno>4.4.3 </span>The <code>nav</code> element</a></li>
- <li><a href=#the-article-element><span class=secno>4.4.4 </span>The <code>article</code> element</a></li>
+ <li><a href=#the-article-element><span class=secno>4.4.2 </span>The <code>article</code> element</a></li>
+ <li><a href=#the-section-element><span class=secno>4.4.3 </span>The <code>section</code> element</a></li>
+ <li><a href=#the-nav-element><span class=secno>4.4.4 </span>The <code>nav</code> element</a></li>
<li><a href=#the-aside-element><span class=secno>4.4.5 </span>The <code>aside</code> element</a></li>
<li><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements><span class=secno>4.4.6 </span>The <code>h1</code>, <code>h2</code>, <code>h3</code>, <code>h4</code>, <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>
@@ -483,7 +483,8 @@
<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.11.1 </span>Creating an outline</a></ol></ol></li>
+ <li><a href=#outlines><span class=secno>4.4.11.1 </span>Creating an outline</a></ol></li>
+ <li><a href=#usage-summary-0><span class=secno>4.4.12 </span>Usage summary</a></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>
@@ -18039,7 +18040,7 @@
- <h4 id=the-section-element><span class=secno>4.4.2 </span>The <dfn><code>section</code></dfn> element</h4>
+ <h4 id=the-article-element><span class=secno>4.4.2 </span>The <dfn><code>article</code></dfn> element</h4>
<dl class=element><dt><a href=#element-dfn-categories title=element-dfn-categories>Categories</a>:</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
@@ -18053,6 +18054,115 @@
<dd><a href=#global-attributes>Global attributes</a></dd>
<dt><a href=#element-dfn-dom title=element-dfn-dom>DOM interface</a>:</dt><!--TOPIC:DOM APIs-->
<dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
+ </dl><!--TOPIC:HTML--><p>The <code><a href=#the-article-element>article</a></code> element <a href=#represents>represents</a> a
+ self-contained composition in a document, page, application, or site
+ and that is, in principle, independently distributable or reusable,
+ e.g. in syndication. This could be a forum post, a magazine or
+ newspaper article, a blog entry, a user-submitted comment, an
+ interactive widget or gadget, or any other independent item of
+ content.</p>
+
+ <p>When <code><a href=#the-article-element>article</a></code> elements are nested, the inner
+ <code><a href=#the-article-element>article</a></code> elements represent articles that are in
+ principle related to the contents of the outer article. For
+ instance, a blog entry on a site that accepts user-submitted
+ comments could represent the comments as <code><a href=#the-article-element>article</a></code>
+ elements nested within the <code><a href=#the-article-element>article</a></code> element for the blog
+ entry.</p>
+
+ <p>Author information associated with an <code><a href=#the-article-element>article</a></code>
+ element (q.v. the <code><a href=#the-address-element>address</a></code> element) does not apply to
+ nested <code><a href=#the-article-element>article</a></code> elements.</p>
+
+ <p class=note>When used specifically with content to be
+ redistributed in syndication, the <code><a href=#the-article-element>article</a></code> element is
+ similar in purpose to the <code title="">entry</code> element in
+ Atom. <a href=#refsATOM>[ATOM]</a>
+
+ <p class=note>The schema.org microdata vocabulary can be used to
+ provide the publication date for an <code><a href=#the-article-element>article</a></code>
+ element, using one of the CreativeWork subtypes.</p>
+
+ <div class=example id=article-example>
+
+ <p>This example shows a blog post using the <code><a href=#the-article-element>article</a></code>
+ element, with some schema.org annotations:</p>
+
+ <pre><article itemscope itemtype="http://schema.org/BlogPosting">
+ <header>
+ <h1 itemprop="headline">The Very First Rule of Life</h1>
+ <p><time itemprop="datePublished" datetime="2009-10-09">3 days ago</time></p>
+ <link itemprop="url" href="?comments=0">
+ </header>
+ <p>If there's a microphone anywhere near you, assume it's hot and
+ sending whatever you're saying to the world. Seriously.</p>
+ <p><em>...</em></p>
+ <footer>
+ <a itemprop="discussionUrl" href="?comments=1">Show comments...</a>
+ </footer>
+</article></pre>
+
+ <p>Here is that same blog post, but showing some of the comments:</p>
+
+ <pre><article itemscope itemtype="http://schema.org/BlogPosting">
+ <header>
+ <h1 itemprop="headline">The Very First Rule of Life</h1>
+ <p><time itemprop="datePublished" datetime="2009-10-09">3 days ago</time></p>
+ <link itemprop="url" href="?comments=0">
+ </header>
+ <p>If there's a microphone anywhere near you, assume it's hot and
+ sending whatever you're saying to the world. Seriously.</p>
+ <p><em>...</em></p>
+ <section>
+ <h1>Comments</h1>
+ <article itemprop="comment" itemscope itemtype="http://schema.org/UserComments" id="c1">
+ <link itemprop="url" href="#c1">
+ <footer>
+ <p>Posted by: <span itemprop="creator" itemscope itemtype="http://schema.org/Person">
+ <span itemprop="name">George Washington</span>
+ </span></p>
+ <p><time itemprop="commentTime" datetime="2009-10-10">15 minutes ago</time></p>
+ </footer>
+ <p>Yeah! Especially when talking about your lobbyist friends!</p>
+ </article>
+ <article itemprop="comment" itemscope itemtype="http://schema.org/UserComments" id="c2">
+ <link itemprop="url" href="#c2">
+ <footer>
+ <p>Posted by: <span itemprop="creator" itemscope itemtype="http://schema.org/Person">
+ <span itemprop="name">George Hammond</span>
+ </span></p>
+ <p><time itemprop="commentTime" datetime="2009-10-10">5 minutes ago</time></p>
+ </footer>
+ <p>Hey, you have the same first name as me.</p>
+ </article>
+ </section>
+</article></pre>
+
+ <p>Notice the use of <code><a href=#the-footer-element>footer</a></code> to give the information
+ for each comment (such as who wrote it and when): the
+ <code><a href=#the-footer-element>footer</a></code> element <em>can</em> appear at the start of its
+ section when appropriate, such as in this case. (Using
+ <code><a href=#the-header-element>header</a></code> in this case wouldn't be wrong either; it's
+ mostly a matter of authoring preference.)</p>
+
+ </div>
+
+
+
+ <h4 id=the-section-element><span class=secno>4.4.3 </span>The <dfn><code>section</code></dfn> element</h4>
+
+ <dl class=element><dt><a href=#element-dfn-categories title=element-dfn-categories>Categories</a>:</dt>
+ <dd><a href=#flow-content>Flow content</a>.</dd>
+ <dd><a href=#sectioning-content>Sectioning content</a>.</dd>
+ <dd><a href=#palpable-content>Palpable content</a>.</dd>
+ <dt><a href=#element-dfn-contexts title=element-dfn-contexts>Contexts in which this element can be used</a>:</dt>
+ <dd>Where <a href=#flow-content>flow content</a> is expected.</dd>
+ <dt><a href=#element-dfn-content-model title=element-dfn-content-model>Content model</a>:</dt>
+ <dd><a href=#flow-content>Flow content</a>.</dd>
+ <dt><a href=#element-dfn-attributes title=element-dfn-attributes>Content attributes</a>:</dt>
+ <dd><a href=#global-attributes>Global attributes</a></dd>
+ <dt><a href=#element-dfn-dom title=element-dfn-dom>DOM interface</a>:</dt><!--TOPIC:DOM APIs-->
+ <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
</dl><!--TOPIC:HTML--><p>The <code><a href=#the-section-element>section</a></code> element <a href=#represents>represents</a> a
generic section of a document or application. A section, in this
context, is a thematic grouping of content, typically with a
@@ -18210,7 +18320,7 @@
- <h4 id=the-nav-element><span class=secno>4.4.3 </span>The <dfn><code>nav</code></dfn> element</h4>
+ <h4 id=the-nav-element><span class=secno>4.4.4 </span>The <dfn><code>nav</code></dfn> element</h4>
<dl class=element><dt><a href=#element-dfn-categories title=element-dfn-categories>Categories</a>:</dt>
<dd><a href=#flow-content>Flow content</a>.</dd>
@@ -18377,116 +18487,7 @@
</div>
- <h4 id=the-article-element><span class=secno>4.4.4 </span>The <dfn><code>article</code></dfn> element</h4>
- <dl class=element><dt><a href=#element-dfn-categories title=element-dfn-categories>Categories</a>:</dt>
- <dd><a href=#flow-content>Flow content</a>.</dd>
- <dd><a href=#sectioning-content>Sectioning content</a>.</dd>
- <dd><a href=#palpable-content>Palpable content</a>.</dd>
- <dt><a href=#element-dfn-contexts title=element-dfn-contexts>Contexts in which this element can be used</a>:</dt>
- <dd>Where <a href=#flow-content>flow content</a> is expected.</dd>
- <dt><a href=#element-dfn-content-model title=element-dfn-content-model>Content model</a>:</dt>
- <dd><a href=#flow-content>Flow content</a>.</dd>
- <dt><a href=#element-dfn-attributes title=element-dfn-attributes>Content attributes</a>:</dt>
- <dd><a href=#global-attributes>Global attributes</a></dd>
- <dt><a href=#element-dfn-dom title=element-dfn-dom>DOM interface</a>:</dt><!--TOPIC:DOM APIs-->
- <dd>Uses <code><a href=#htmlelement>HTMLElement</a></code>.</dd>
- </dl><!--TOPIC:HTML--><p>The <code><a href=#the-article-element>article</a></code> element <a href=#represents>represents</a> a
- self-contained composition in a document, page, application, or site
- and that is, in principle, independently distributable or reusable,
- e.g. in syndication. This could be a forum post, a magazine or
- newspaper article, a blog entry, a user-submitted comment, an
- interactive widget or gadget, or any other independent item of
- content.</p>
-
- <p>When <code><a href=#the-article-element>article</a></code> elements are nested, the inner
- <code><a href=#the-article-element>article</a></code> elements represent articles that are in
- principle related to the contents of the outer article. For
- instance, a blog entry on a site that accepts user-submitted
- comments could represent the comments as <code><a href=#the-article-element>article</a></code>
- elements nested within the <code><a href=#the-article-element>article</a></code> element for the blog
- entry.</p>
-
- <p>Author information associated with an <code><a href=#the-article-element>article</a></code>
- element (q.v. the <code><a href=#the-address-element>address</a></code> element) does not apply to
- nested <code><a href=#the-article-element>article</a></code> elements.</p>
-
- <p class=note>When used specifically with content to be
- redistributed in syndication, the <code><a href=#the-article-element>article</a></code> element is
- similar in purpose to the <code title="">entry</code> element in
- Atom. <a href=#refsATOM>[ATOM]</a>
-
- <p class=note>The schema.org microdata vocabulary can be used to
- provide the publication date for an <code><a href=#the-article-element>article</a></code>
- element, using one of the CreativeWork subtypes.</p>
-
- <div class=example id=article-example>
-
- <p>This example shows a blog post using the <code><a href=#the-article-element>article</a></code>
- element, with some schema.org annotations:</p>
-
- <pre><article itemscope itemtype="http://schema.org/BlogPosting">
- <header>
- <h1 itemprop="headline">The Very First Rule of Life</h1>
- <p><time itemprop="datePublished" datetime="2009-10-09">3 days ago</time></p>
- <link itemprop="url" href="?comments=0">
- </header>
- <p>If there's a microphone anywhere near you, assume it's hot and
- sending whatever you're saying to the world. Seriously.</p>
- <p><em>...</em></p>
- <footer>
- <a itemprop="discussionUrl" href="?comments=1">Show comments...</a>
- </footer>
-</article></pre>
-
- <p>Here is that same blog post, but showing some of the comments:</p>
-
- <pre><article itemscope itemtype="http://schema.org/BlogPosting">
- <header>
- <h1 itemprop="headline">The Very First Rule of Life</h1>
- <p><time itemprop="datePublished" datetime="2009-10-09">3 days ago</time></p>
- <link itemprop="url" href="?comments=0">
- </header>
- <p>If there's a microphone anywhere near you, assume it's hot and
- sending whatever you're saying to the world. Seriously.</p>
- <p><em>...</em></p>
- <section>
- <h1>Comments</h1>
- <article itemprop="comment" itemscope itemtype="http://schema.org/UserComments" id="c1">
- <link itemprop="url" href="#c1">
- <footer>
- <p>Posted by: <span itemprop="creator" itemscope itemtype="http://schema.org/Person">
- <span itemprop="name">George Washington</span>
- </span></p>
- <p><time itemprop="commentTime" datetime="2009-10-10">15 minutes ago</time></p>
- </footer>
- <p>Yeah! Especially when talking about your lobbyist friends!</p>
- </article>
- <article itemprop="comment" itemscope itemtype="http://schema.org/UserComments" id="c2">
- <link itemprop="url" href="#c2">
- <footer>
- <p>Posted by: <span itemprop="creator" itemscope itemtype="http://schema.org/Person">
- <span itemprop="name">George Hammond</span>
- </span></p>
- <p><time itemprop="commentTime" datetime="2009-10-10">5 minutes ago</time></p>
- </footer>
- <p>Hey, you have the same first name as me.</p>
- </article>
- </section>
-</article></pre>
-
- <p>Notice the use of <code><a href=#the-footer-element>footer</a></code> to give the information
- for each comment (such as who wrote it and when): the
- <code><a href=#the-footer-element>footer</a></code> element <em>can</em> appear at the start of its
- section when appropriate, such as in this case. (Using
- <code><a href=#the-header-element>header</a></code> in this case wouldn't be wrong either; it's
- mostly a matter of authoring preference.)</p>
-
- </div>
-
-
-
-
<h4 id=the-aside-element><span class=secno>4.4.5 </span>The <dfn><code>aside</code></dfn> element</h4>
<dl class=element><dt><a href=#element-dfn-categories title=element-dfn-categories>Categories</a>:</dt>
@@ -19676,8 +19677,112 @@
- <h3 id=grouping-content><span class=secno>4.5 </span>Grouping content</h3>
+ <h4 id=usage-summary-0><span class=secno>4.4.12 </span>Usage summary</h4>
+ <p><i>This section is non-normative.</i></p>
+
+ <table><thead><tr><th rowspan=2>Element
+ <th>Purpose
+ <tr><th>Example
+ <tbody><tr><td rowspan=2><code><a href=#the-body-element>body</a></code>
+ <td>The main content of the document.
+ <tr><td><pre class=example><!DOCTYPE HTML>
+<html>
+ <head> <title>Steve Hill's Home Page</title> </head>
+ <strong><body></strong> <p>Hard Trance is My Life.</p> <strong></body></strong>
+</html></pre>
+
+ <tr><td rowspan=2><code><a href=#the-article-element>article</a></code>
+ <td>A self-contained composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
+ <tr><td><pre class=example><strong><article></strong>
+ <img src="/tumblr_masqy2s5yn1rzfqbpo1_500.jpg" alt="Yellow smiley face with the caption 'masif'">
+ <p>My fave Masif tee so far!</p>
+ <footer>Posted 2 days ago</footer>
+<strong></article></strong>
+<strong><article></strong>
+ <img src="/tumblr_m9tf6wSr6W1rzfqbpo1_500.jpg" alt="">
+ <p>Happy 2nd birthday Masif Saturdays!!!</p>
+ <footer>Posted 3 weeks ago</footer>
+<strong></article></strong></pre>
+
+ <tr><td rowspan=2><code><a href=#the-section-element>section</a></code>
+ <td>A generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.
+ <tr><td><pre class=example><h1>Biography</h1>
+<strong><section></strong>
+ <h1>The facts</h1>
+ <p>1500+ shows, 14+ countries</p>
+<strong></section></strong>
+<strong><section></strong>
+ <h1>2010/2011 figures per year</h1>
+ <p>100+ shows, 8+ countries</p>
+<strong></section></strong></pre>
+
+ <tr><td rowspan=2><code><a href=#the-nav-element>nav</a></code>
+ <td>A section of a page that links to other pages or to parts within the page: a section with navigation links.
+ <tr><td><pre class=example><strong><nav></strong>
+ <p><a href="/">Home</a>
+ <p><a href="/biog.html">Bio</a>
+ <p><a href="/discog.html">Discog</a>
+<strong></nav></strong></pre>
+
+ <tr><td rowspan=2><code><a href=#the-aside-element>aside</a></code>
+ <td>A section of a page that consists of content that is tangentially related to the content around the <code><a href=#the-aside-element>aside</a></code> element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.
+ <tr><td><pre class=example><h1>Music</h1>
+<p>As any burner can tell you, the event has a lot of trance.</p>
+<strong><aside></strong>You can buy the music we played at our <a href="buy.html">playlist page</a>.<strong></aside></strong>
+<p>This year we played a kind of trance that originated in Belgium, Germany, and the Netherlands in the mid 90s.</p></pre>
+
+ <tr><td rowspan=2><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>h6</a></code>
+ <td>A section heading
+ <tr><td><pre class=example><strong><h1></strong>The Guide To Music On The Playa<strong></h1></strong>
+<strong><h2></strong>The Main Stage<strong></h2></strong>
+<p>If you want to play on a stage, you should bring one.</p>
+<strong><h2></strong>Amplified Music<strong></h2></strong>
+<p>Amplifiers up to 300W or 90dB are welcome.</p></pre>
+
+ <tr><td rowspan=2><code><a href=#the-hgroup-element>hgroup</a></code>
+ <td>The heading 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>–<code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h6</a></code> elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines.
+ <tr><td><pre class=example><strong><hgroup></strong>
+ <h1>Burning Music</h1>
+ <h2>The Guide To Music On The Playa</h2>
+<strong></hgroup></strong>
+<section>
+ <strong><hgroup></strong>
+ <h1>Main Stage</h1>
+ <h2>The Fiction Of A Music Festival</h2>
+ <strong></hgroup></strong>
+ <p>If you want to play on a stage, you should bring one.</p>
+</section>
+<section>
+ <strong><hgroup></strong>
+ <h1>Loudness!</h1>
+ <h2>Questions About Amplified Music</h2>
+ <strong></hgroup></strong>
+ <p>Amplifiers up to 300W or 90dB are welcome.</p>
+</section></pre>
+
+ <tr><td rowspan=2><code><a href=#the-header-element>header</a></code>
+ <td>A group of introductory or navigational aids.
+ <tr><td><pre class=example><article>
+ <strong><header></strong>
+ <h1>Hard Trance is My Life</h1>
+ <p>By DJ Steve Hill and Technikal</p>
+ <strong></header></strong>
+ <p>The album with the amusing punctuation has red artwork.</p>
+</article></pre>
+
+ <tr><td rowspan=2><code><a href=#the-footer-element>footer</a></code>
+ <td>A footer for its nearest ancestor <a href=#sectioning-content>sectioning content</a> or <a href=#sectioning-root>sectioning root</a> element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.
+ <tr><td><pre class=example><article>
+ <h1>Hard Trance is My Life</h1>
+ <p>The album with the amusing punctuation has red artwork.</p>
+ <strong><footer></strong>
+ <p>Artists: DJ Steve Hill and Technikal</p>
+ <strong></footer></strong>
+</article></pre>
+
+ </table><h3 id=grouping-content><span class=secno>4.5 </span>Grouping content</h3>
+
<h4 id=the-p-element><span class=secno>4.5.1 </span>The <dfn><code>p</code></dfn> element</h4>
<dl class=element><dt><a href=#element-dfn-categories title=element-dfn-categories>Categories</a>:</dt>
Modified: source
===================================================================
--- source 2012-09-25 04:30:10 UTC (rev 7403)
+++ source 2012-09-26 00:02:01 UTC (rev 7404)
@@ -19357,6 +19357,118 @@
+ <h4>The <dfn><code>article</code></dfn> element</h4>
+
+ <dl class="element">
+ <dt><span title="element-dfn-categories">Categories</span>:</dt>
+ <dd><span>Flow content</span>.</dd>
+ <dd><span>Sectioning content</span>.</dd>
+ <dd><span>Palpable content</span>.</dd>
+ <dt><span title="element-dfn-contexts">Contexts in which this element can be used</span>:</dt>
+ <dd>Where <span>flow content</span> is expected.</dd>
+ <dt><span title="element-dfn-content-model">Content model</span>:</dt>
+ <dd><span>Flow content</span>.</dd>
+ <dt><span title="element-dfn-attributes">Content attributes</span>:</dt>
+ <dd><span>Global attributes</span></dd>
+ <dt><span title="element-dfn-dom">DOM interface</span>:</dt><!--TOPIC:DOM APIs-->
+ <dd>Uses <code>HTMLElement</code>.</dd>
+ </dl><!--TOPIC:HTML-->
+
+ <p>The <code>article</code> element <span>represents</span> a
+ self-contained composition in a document, page, application, or site
+ and that is, in principle, independently distributable or reusable,
+ e.g. in syndication. This could be a forum post, a magazine or
+ newspaper article, a blog entry, a user-submitted comment, an
+ interactive widget or gadget, or any other independent item of
+ content.</p>
+
+ <p>When <code>article</code> elements are nested, the inner
+ <code>article</code> elements represent articles that are in
+ principle related to the contents of the outer article. For
+ instance, a blog entry on a site that accepts user-submitted
+ comments could represent the comments as <code>article</code>
+ elements nested within the <code>article</code> element for the blog
+ entry.</p>
+
+ <p>Author information associated with an <code>article</code>
+ element (q.v. the <code>address</code> element) does not apply to
+ nested <code>article</code> elements.</p>
+
+ <p class="note">When used specifically with content to be
+ redistributed in syndication, the <code>article</code> element is
+ similar in purpose to the <code title="">entry</code> element in
+ Atom. <a href="#refsATOM">[ATOM]</a>
+
+ <p class="note">The schema.org microdata vocabulary can be used to
+ provide the publication date for an <code>article</code>
+ element, using one of the CreativeWork subtypes.</p>
+
+ <div id="article-example" class="example">
+
+ <p>This example shows a blog post using the <code>article</code>
+ element, with some schema.org annotations:</p>
+
+ <pre><article itemscope itemtype="http://schema.org/BlogPosting">
+ <header>
+ <h1 itemprop="headline">The Very First Rule of Life</h1>
+ <p><time itemprop="datePublished" datetime="2009-10-09">3 days ago</time></p>
+ <link itemprop="url" href="?comments=0">
+ </header>
+ <p>If there's a microphone anywhere near you, assume it's hot and
+ sending whatever you're saying to the world. Seriously.</p>
+ <p><em>...</em></p>
+ <footer>
+ <a itemprop="discussionUrl" href="?comments=1">Show comments...</a>
+ </footer>
+</article></pre>
+
+ <p>Here is that same blog post, but showing some of the comments:</p>
+
+ <pre><article itemscope itemtype="http://schema.org/BlogPosting">
+ <header>
+ <h1 itemprop="headline">The Very First Rule of Life</h1>
+ <p><time itemprop="datePublished" datetime="2009-10-09">3 days ago</time></p>
+ <link itemprop="url" href="?comments=0">
+ </header>
+ <p>If there's a microphone anywhere near you, assume it's hot and
+ sending whatever you're saying to the world. Seriously.</p>
+ <p><em>...</em></p>
+ <section>
+ <h1>Comments</h1>
+ <article itemprop="comment" itemscope itemtype="http://schema.org/UserComments" id="c1">
+ <link itemprop="url" href="#c1">
+ <footer>
+ <p>Posted by: <span itemprop="creator" itemscope itemtype="http://schema.org/Person">
+ <span itemprop="name">George Washington</span>
+ </span></p>
+ <p><time itemprop="commentTime" datetime="2009-10-10">15 minutes ago</time></p>
+ </footer>
+ <p>Yeah! Especially when talking about your lobbyist friends!</p>
+ </article>
+ <article itemprop="comment" itemscope itemtype="http://schema.org/UserComments" id="c2">
+ <link itemprop="url" href="#c2">
+ <footer>
+ <p>Posted by: <span itemprop="creator" itemscope itemtype="http://schema.org/Person">
+ <span itemprop="name">George Hammond</span>
+ </span></p>
+ <p><time itemprop="commentTime" datetime="2009-10-10">5 minutes ago</time></p>
+ </footer>
+ <p>Hey, you have the same first name as me.</p>
+ </article>
+ </section>
+</article></pre>
+
+ <p>Notice the use of <code>footer</code> to give the information
+ for each comment (such as who wrote it and when): the
+ <code>footer</code> element <em>can</em> appear at the start of its
+ section when appropriate, such as in this case. (Using
+ <code>header</code> in this case wouldn't be wrong either; it's
+ mostly a matter of authoring preference.)</p>
+
+ </div>
+
+
+
<h4>The <dfn><code>section</code></dfn> element</h4>
<dl class="element">
@@ -19701,119 +19813,7 @@
</div>
- <h4>The <dfn><code>article</code></dfn> element</h4>
- <dl class="element">
- <dt><span title="element-dfn-categories">Categories</span>:</dt>
- <dd><span>Flow content</span>.</dd>
- <dd><span>Sectioning content</span>.</dd>
- <dd><span>Palpable content</span>.</dd>
- <dt><span title="element-dfn-contexts">Contexts in which this element can be used</span>:</dt>
- <dd>Where <span>flow content</span> is expected.</dd>
- <dt><span title="element-dfn-content-model">Content model</span>:</dt>
- <dd><span>Flow content</span>.</dd>
- <dt><span title="element-dfn-attributes">Content attributes</span>:</dt>
- <dd><span>Global attributes</span></dd>
- <dt><span title="element-dfn-dom">DOM interface</span>:</dt><!--TOPIC:DOM APIs-->
- <dd>Uses <code>HTMLElement</code>.</dd>
- </dl><!--TOPIC:HTML-->
-
- <p>The <code>article</code> element <span>represents</span> a
- self-contained composition in a document, page, application, or site
- and that is, in principle, independently distributable or reusable,
- e.g. in syndication. This could be a forum post, a magazine or
- newspaper article, a blog entry, a user-submitted comment, an
- interactive widget or gadget, or any other independent item of
- content.</p>
-
- <p>When <code>article</code> elements are nested, the inner
- <code>article</code> elements represent articles that are in
- principle related to the contents of the outer article. For
- instance, a blog entry on a site that accepts user-submitted
- comments could represent the comments as <code>article</code>
- elements nested within the <code>article</code> element for the blog
- entry.</p>
-
- <p>Author information associated with an <code>article</code>
- element (q.v. the <code>address</code> element) does not apply to
- nested <code>article</code> elements.</p>
-
- <p class="note">When used specifically with content to be
- redistributed in syndication, the <code>article</code> element is
- similar in purpose to the <code title="">entry</code> element in
- Atom. <a href="#refsATOM">[ATOM]</a>
-
- <p class="note">The schema.org microdata vocabulary can be used to
- provide the publication date for an <code>article</code>
- element, using one of the CreativeWork subtypes.</p>
-
- <div id="article-example" class="example">
-
- <p>This example shows a blog post using the <code>article</code>
- element, with some schema.org annotations:</p>
-
- <pre><article itemscope itemtype="http://schema.org/BlogPosting">
- <header>
- <h1 itemprop="headline">The Very First Rule of Life</h1>
- <p><time itemprop="datePublished" datetime="2009-10-09">3 days ago</time></p>
- <link itemprop="url" href="?comments=0">
- </header>
- <p>If there's a microphone anywhere near you, assume it's hot and
- sending whatever you're saying to the world. Seriously.</p>
- <p><em>...</em></p>
- <footer>
- <a itemprop="discussionUrl" href="?comments=1">Show comments...</a>
- </footer>
-</article></pre>
-
- <p>Here is that same blog post, but showing some of the comments:</p>
-
- <pre><article itemscope itemtype="http://schema.org/BlogPosting">
- <header>
- <h1 itemprop="headline">The Very First Rule of Life</h1>
- <p><time itemprop="datePublished" datetime="2009-10-09">3 days ago</time></p>
- <link itemprop="url" href="?comments=0">
- </header>
- <p>If there's a microphone anywhere near you, assume it's hot and
- sending whatever you're saying to the world. Seriously.</p>
- <p><em>...</em></p>
- <section>
- <h1>Comments</h1>
- <article itemprop="comment" itemscope itemtype="http://schema.org/UserComments" id="c1">
- <link itemprop="url" href="#c1">
- <footer>
- <p>Posted by: <span itemprop="creator" itemscope itemtype="http://schema.org/Person">
- <span itemprop="name">George Washington</span>
- </span></p>
- <p><time itemprop="commentTime" datetime="2009-10-10">15 minutes ago</time></p>
- </footer>
- <p>Yeah! Especially when talking about your lobbyist friends!</p>
- </article>
- <article itemprop="comment" itemscope itemtype="http://schema.org/UserComments" id="c2">
- <link itemprop="url" href="#c2">
- <footer>
- <p>Posted by: <span itemprop="creator" itemscope itemtype="http://schema.org/Person">
- <span itemprop="name">George Hammond</span>
- </span></p>
- <p><time itemprop="commentTime" datetime="2009-10-10">5 minutes ago</time></p>
- </footer>
- <p>Hey, you have the same first name as me.</p>
- </article>
- </section>
-</article></pre>
-
- <p>Notice the use of <code>footer</code> to give the information
- for each comment (such as who wrote it and when): the
- <code>footer</code> element <em>can</em> appear at the start of its
- section when appropriate, such as in this case. (Using
- <code>header</code> in this case wouldn't be wrong either; it's
- mostly a matter of authoring preference.)</p>
-
- </div>
-
-
-
-
<h4>The <dfn><code>aside</code></dfn> element</h4>
<dl class="element">
@@ -21096,6 +21096,136 @@
+ <h4>Usage summary</h4>
+
+ <!--END dev-html--><p><i>This section is non-normative.</i></p><!--START dev-html-->
+
+ <table>
+ <thead>
+ <tr>
+ <th rowspan=2>Element
+ <th>Purpose
+ <tr>
+ <th>Example
+ <tbody>
+ <tr>
+ <td rowspan=2><code>body</code>
+ <td><!--REPRESENTS body-->
+ <tr>
+ <td><pre class="example"><!DOCTYPE HTML>
+<html>
+ <head> <title>Steve Hill's Home Page</title> </head>
+ <strong><body></strong> <p>Hard Trance is My Life.</p> <strong></body></strong>
+</html></pre>
+
+ <tr>
+ <td rowspan=2><code>article</code>
+ <td><!--REPRESENTS article-->
+ <tr>
+ <td><pre class="example"><strong><article></strong>
+ <img src="/tumblr_masqy2s5yn1rzfqbpo1_500.jpg" alt="Yellow smiley face with the caption 'masif'">
+ <p>My fave Masif tee so far!</p>
+ <footer>Posted 2 days ago</footer>
+<strong></article></strong>
+<strong><article></strong>
+ <img src="/tumblr_m9tf6wSr6W1rzfqbpo1_500.jpg" alt="">
+ <p>Happy 2nd birthday Masif Saturdays!!!</p>
+ <footer>Posted 3 weeks ago</footer>
+<strong></article></strong></pre>
+
+ <tr>
+ <td rowspan=2><code>section</code>
+ <td><!--REPRESENTS section-->
+ <tr>
+ <td><pre class="example"><h1>Biography</h1>
+<strong><section></strong>
+ <h1>The facts</h1>
+ <p>1500+ shows, 14+ countries</p>
+<strong></section></strong>
+<strong><section></strong>
+ <h1>2010/2011 figures per year</h1>
+ <p>100+ shows, 8+ countries</p>
+<strong></section></strong></pre>
+
+ <tr>
+ <td rowspan=2><code>nav</code>
+ <td><!--REPRESENTS nav-->
+ <tr>
+ <td><pre class="example"><strong><nav></strong>
+ <p><a href="/">Home</a>
+ <p><a href="/biog.html">Bio</a>
+ <p><a href="/discog.html">Discog</a>
+<strong></nav></strong></pre>
+
+ <tr>
+ <td rowspan=2><code>aside</code>
+ <td><!--REPRESENTS aside-->
+ <tr>
+ <td><pre class="example"><h1>Music</h1>
+<p>As any burner can tell you, the event has a lot of trance.</p>
+<strong><aside></strong>You can buy the music we played at our <a href="buy.html">playlist page</a>.<strong></aside></strong>
+<p>This year we played a kind of trance that originated in Belgium, Germany, and the Netherlands in the mid 90s.</p></pre>
+
+ <tr>
+ <td rowspan=2><code>h1</code>–<code>h6</code>
+ <td>A section heading
+ <tr>
+ <td><pre class="example"><strong><h1></strong>The Guide To Music On The Playa<strong></h1></strong>
+<strong><h2></strong>The Main Stage<strong></h2></strong>
+<p>If you want to play on a stage, you should bring one.</p>
+<strong><h2></strong>Amplified Music<strong></h2></strong>
+<p>Amplifiers up to 300W or 90dB are welcome.</p></pre>
+
+ <tr>
+ <td rowspan=2><code>hgroup</code>
+ <td><!--REPRESENTS hgroup-->
+ <tr>
+ <td><pre class="example"><strong><hgroup></strong>
+ <h1>Burning Music</h1>
+ <h2>The Guide To Music On The Playa</h2>
+<strong></hgroup></strong>
+<section>
+ <strong><hgroup></strong>
+ <h1>Main Stage</h1>
+ <h2>The Fiction Of A Music Festival</h2>
+ <strong></hgroup></strong>
+ <p>If you want to play on a stage, you should bring one.</p>
+</section>
+<section>
+ <strong><hgroup></strong>
+ <h1>Loudness!</h1>
+ <h2>Questions About Amplified Music</h2>
+ <strong></hgroup></strong>
+ <p>Amplifiers up to 300W or 90dB are welcome.</p>
+</section></pre>
+
+ <tr>
+ <td rowspan=2><code>header</code>
+ <td><!--REPRESENTS header-->
+ <tr>
+ <td><pre class="example"><article>
+ <strong><header></strong>
+ <h1>Hard Trance is My Life</h1>
+ <p>By DJ Steve Hill and Technikal</p>
+ <strong></header></strong>
+ <p>The album with the amusing punctuation has red artwork.</p>
+</article></pre>
+
+ <tr>
+ <td rowspan=2><code>footer</code>
+ <td><!--REPRESENTS footer-->
+ <tr>
+ <td><pre class="example"><article>
+ <h1>Hard Trance is My Life</h1>
+ <p>The album with the amusing punctuation has red artwork.</p>
+ <strong><footer></strong>
+ <p>Artists: DJ Steve Hill and Technikal</p>
+ <strong></footer></strong>
+</article></pre>
+
+ </table>
+
+
<h3>Grouping content</h3>
<h4>The <dfn><code>p</code></dfn> element</h4>
More information about the Commit-Watchers
mailing list