hixie: <article>, <body>, and related examples. (whatwg r3796)

hixie: <article>, <body>, and related examples. (whatwg r3796)

http://dev.w3.org/cvsweb/html5/spec/Overview.html?r1=1.2964&r2=1.2965&f=h
http://html5.org/tools/web-apps-tracker?from=3795&to=3796

===================================================================
RCS file: /sources/public/html5/spec/Overview.html,v
retrieving revision 1.2964
retrieving revision 1.2965
diff -u -d -r1.2964 -r1.2965
--- Overview.html 10 Sep 2009 11:20:54 -0000 1.2964
+++ Overview.html 10 Sep 2009 23:04:28 -0000 1.2965
@@ -1589,7 +1589,7 @@
   not an <a href="#ascii-case-insensitive">ASCII case-insensitive</a> match for the string
   "<code title="">xml</code>". <a href="#refsXML">[XML]</a><p>The term <dfn id="xml-mime-type">XML MIME type</dfn> is used to refer to the <a href="#mime-type" title="MIME type">MIME types</a> <code title="">text/xml</code>,
   <code title="">application/xml</code>, and any MIME type ending with
-  the four characters "<code title="">+xml</code>". <a href="#refsRFC3023">[RFC3023]</a><h4 id="dom-trees"><span class="secno">2.1.3 </span>DOM trees</h4><p>The term <dfn id="root-element">root element</dfn>, when not explicitly qualified
+  the four characters "<code title="">+xml</code>". <a href="#refsRFC3023">[RFC3023]</a><h4 id="dom-trees"><span class="secno">2.1.3 </span>DOM trees</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i><p>The term <dfn id="root-element">root element</dfn>, when not explicitly qualified
   as referring to the document's root element, means the furthest
   ancestor element node of whatever node is being discussed, or the
   node itself if it has no ancestors. When the node is a part of the
@@ -1619,7 +1619,7 @@
   <code>Node</code> with node type <code title="">TEXT_NODE</code> (3)
   or <code title="">CDATA_SECTION_NODE</code> (4). <a href="#refsDOMCORE">[DOMCORE]</a><p>A content attribute is said to <dfn title="">change</dfn> value
   only if its new value is different than its previous value; setting
-  an attribute to a value it already has does not change it.<h4 id="scripting-0"><span class="secno">2.1.4 </span>Scripting</h4><p>The construction "a <code>Foo</code> object", where
+  an attribute to a value it already has does not change it.<h4 id="scripting-0"><span class="secno">2.1.4 </span>Scripting</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i><p>The construction "a <code>Foo</code> object", where
   <code>Foo</code> is actually an interface, is sometimes used instead
   of the more accurate "an object implementing the interface
   <code>Foo</code>".<p>A IDL attribute is said to be <dfn title="">getting</dfn> when its value is
@@ -1630,7 +1630,7 @@
   <span class="impl">must</span> operate on the actual underlying
   data, not a snapshot of the data.<p>The terms <dfn title="">fire</dfn> and <dfn title="">dispatch</dfn> are used
   interchangeably in the context of events, as in the DOM Events
-  specifications. <a href="#refsDOMEVENTS">[DOMEVENTS]</a><h4 id="plugins"><span class="secno">2.1.5 </span>Plugins</h4><p>The term <dfn id="plugin">plugin</dfn> is used to mean any content handler
+  specifications. <a href="#refsDOMEVENTS">[DOMEVENTS]</a><h4 id="plugins"><span class="secno">2.1.5 </span>Plugins</h4><p class="XXX annotation"><b>Status: </b><i>Implemented and widely deployed</i><p>The term <dfn id="plugin">plugin</dfn> is used to mean any content handler
   for Web content types that are either not supported by the user
   agent natively or that do not expose a DOM, which supports rendering
   the content as part of the user agent's interface.<p>Typically such content handlers are provided by third
@@ -1649,7 +1649,7 @@
   interacting with external content intended for <a href="#plugin" title="plugin">plugins</a>. When third-party software is run with
   the same privileges as the user agent itself, vulnerabilities in the
   third-party software become as dangerous as those in the user
-  agent.<h4 id="character-encodings"><span class="secno">2.1.6 </span>Character encodings</h4><p>An <dfn id="ascii-compatible-character-encoding">ASCII-compatible character encoding</dfn> is a
+  agent.<h4 id="character-encodings"><span class="secno">2.1.6 </span>Character encodings</h4><p class="XXX annotation"><b>Status: </b><i>Working draft</i><p>An <dfn id="ascii-compatible-character-encoding">ASCII-compatible character encoding</dfn> is a
   single-byte or variable-length encoding in which the bytes 0x09,
   0x0A, 0x0C, 0x0D, 0x20 - 0x22, 0x26, 0x27, 0x2C - 0x3F, 0x41 - 0x5A,
   and 0x61 - 0x7A<!-- is that list ok? do any character sets we want
@@ -1665,7 +1665,7 @@
    We'll have to change that if anyone comes up with a way to have a
    document that is valid as two different encodings at once, with
    different <meta charset> elements applying in each case.
-  --><h3 id="conformance-requirements"><span class="secno">2.2 </span>Conformance requirements</h3><p class="XXX annotation"><b>Status: </b><i>Working draft</i><p>All diagrams, examples, and notes in this specification are
+  --><h3 id="conformance-requirements"><span class="secno">2.2 </span>Conformance requirements</h3><p class="XXX annotation"><b>Status: </b><i>Implemented and widely deployed</i><p>All diagrams, examples, and notes in this specification are
   non-normative, as are all sections explicitly marked non-normative.
   Everything else in this specification is normative.<p>The key words "MUST", "MUST NOT", "REQUIRED", <!--"SHALL", "SHALL
   NOT",--> "SHOULD", "SHOULD NOT", "RECOMMENDED", "MAY", and
@@ -2022,7 +2022,7 @@
 
   </div><div class="impl">
 
-  <h4 id="extensibility"><span class="secno">2.2.2 </span>Extensibility</h4><p class="XXX annotation"><span><a href="http://www.w3.org/html/wg/tracker/issues/41">ISSUE-41</a> (Decentralized-extensibility) blocks progress to Last Call</span></p>
+  <h4 id="extensibility"><span class="secno">2.2.2 </span>Extensibility</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments. </i><span><a href="http://www.w3.org/html/wg/tracker/issues/41">ISSUE-41</a> (Decentralized-extensibility) blocks progress to Last Call</span></p>
 
   <p>Vendor-specific proprietary extensions to this specification are
   strongly discouraged. Documents must not use such extensions, as
@@ -2057,7 +2057,7 @@
   processors), and styling them according to CSS (for CSS processors),
   but not inferring any meaning from them.</p>
 
-  </div><h3 id="case-sensitivity-and-string-comparison"><span class="secno">2.3 </span>Case-sensitivity and string comparison</h3><p class="XXX annotation"><b>Status: </b><i>Working draft</i><p>Comparing two strings in a <dfn id="case-sensitive">case-sensitive</dfn> manner means
+  </div><h3 id="case-sensitivity-and-string-comparison"><span class="secno">2.3 </span>Case-sensitivity and string comparison</h3><p class="XXX annotation"><b>Status: </b><i>Implemented and widely deployed</i><p>Comparing two strings in a <dfn id="case-sensitive">case-sensitive</dfn> manner means
   comparing them exactly, code point for code point.<p>Comparing two strings in an <dfn id="ascii-case-insensitive">ASCII case-insensitive</dfn>
   manner means comparing them exactly, code point for code point, except
   that the characters in the range U+0041 .. U+005A (i.e. LATIN
@@ -7093,7 +7093,7 @@
   </div><p class="note">Authors are strongly encouraged to use the <code title="attr-dir"><a href="#the-dir-attribute">dir</a></code> attribute to indicate text direction
   rather than using CSS, since that way their documents will continue
   to render correctly even in the absence of CSS (e.g. as interpreted
-  by search engines).<h5 id="classes"><span class="secno">3.2.3.6 </span>The <dfn title="attr-class"><code>class</code></dfn> attribute</h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i><p>Every <a href="#html-elements" title="HTML elements">HTML element</a> may have a
+  by search engines).<h5 id="classes"><span class="secno">3.2.3.6 </span>The <dfn title="attr-class"><code>class</code></dfn> attribute</h5><p class="XXX annotation"><b>Status: </b><i>Awaiting implementation feedback</i><p>Every <a href="#html-elements" title="HTML elements">HTML element</a> may have a
   <code title="attr-class"><a href="#classes">class</a></code> attribute specified.<p>The attribute, if specified, must have a value that is an
   <a href="#unordered-set-of-unique-space-separated-tokens">unordered set of unique space-separated tokens</a>
   representing the various classes that the element belongs to.<div class="impl">
@@ -8301,7 +8301,7 @@
   document interact with the parser, and thus their behavior, varies
   depending on whether they are used with <a href="#html-documents">HTML documents</a>
   (and the <a href="#html-parser">HTML parser</a>) or XHTML in <a href="#xml-documents">XML
-  documents</a> (and the <a href="#xml-parser">XML parser</a>).<h4 id="opening-the-input-stream"><span class="secno">3.5.1 </span>Opening the input stream</h4><p>The <dfn id="dom-document-open" title="dom-document-open"><code>open()</code></dfn>
+  documents</a> (and the <a href="#xml-parser">XML parser</a>).<h4 id="opening-the-input-stream"><span class="secno">3.5.1 </span>Opening the input stream</h4><p class="XXX annotation"><b>Status: </b><i>Implemented and widely deployed</i><p>The <dfn id="dom-document-open" title="dom-document-open"><code>open()</code></dfn>
   method comes in several variants with different numbers of
   arguments.<dl class="domintro"><dt><var title="">document</var> = <var title="">document</var> . <code title="dom-document-open"><a href="#dom-document-open">open</a></code>( [ <var title="">type</var> [, <var title="">replace</var> ] ] )</dt>
 
@@ -8490,7 +8490,7 @@
   <code><a href="#window">Window</a></code> object, then the method must raise an
   <code><a href="#invalid_access_err">INVALID_ACCESS_ERR</a></code> exception.</p>
 
-  </div><h4 id="closing-the-input-stream"><span class="secno">3.5.2 </span>Closing the input stream</h4><dl class="domintro"><dt><var title="">document</var> . <code title="dom-document-close"><a href="#dom-document-close">close</a></code>()</dt>
+  </div><h4 id="closing-the-input-stream"><span class="secno">3.5.2 </span>Closing the input stream</h4><p class="XXX annotation"><b>Status: </b><i>Implemented and widely deployed</i><dl class="domintro"><dt><var title="">document</var> . <code title="dom-document-close"><a href="#dom-document-close">close</a></code>()</dt>
 
    <dd>
 
@@ -11282,7 +11282,30 @@
   is watching the <code><a href="#window">Window</a></code> not the <code><a href="#the-body-element-0">body</a></code>. A
   regular event listener attached to the <code><a href="#the-body-element-0">body</a></code> using <code title="">addEventListener()</code>, however, would fire when the
   event bubbled through the <code><a href="#the-body-element-0">body</a></code> and not when it reaches
-  the <code><a href="#window">Window</a></code> object.<h4 id="the-section-element"><span class="secno">4.4.2 </span>The <dfn><code>section</code></dfn> element</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i><dl class="element"><dt>Categories</dt>
+  the <code><a href="#window">Window</a></code> object.<div class="example">
+
+   <p>This page updates an indicator to show whether or not the user
+   is online:</p>
+
+   <pre>&lt;!DOCTYPE HTML&gt;
+&lt;html&gt;
+ &lt;head&gt;
+  &lt;title&gt;Online or offline?&lt;/title&gt;
+  &lt;script&gt;
+   function update(online) {
+     document.getElementById('status').textContent = 
+       online ? 'Online' : 'Offline';
+   }
+  &lt;/script&gt;
+ &lt;/head&gt;
+ &lt;body ononline="update(true)"
+       onoffline="update(false)"
+       onload="update(navigator.onLine)"&gt;
+  &lt;p&gt;You are: &lt;span id="status"&gt;(Unknown)&lt;/span&gt;&lt;/p&gt;
+ &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+  </div><h4 id="the-section-element"><span class="secno">4.4.2 </span>The <dfn><code>section</code></dfn> element</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i><dl class="element"><dt>Categories</dt>
    <dd><a href="#flow-content">Flow content</a>.</dd>
    <dd><a href="#sectioning-content">Sectioning content</a>.</dd>
    <dd><a href="#formatblock-candidate"><code title="">formatBlock</code> candidate</a>.</dd>
@@ -11381,9 +11404,21 @@
    &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;
+ &lt;div&gt;
+  &lt;article&gt;
+   &lt;header&gt;
+    &lt;h1&gt;My Day at the Beach&lt;/h1&gt;
+   &lt;/header&gt;
+   &lt;div&gt;
+    &lt;p&gt;Today I went to the beach and had a lot of fun.&lt;/p&gt;
+    <em>...more content...</em>
+   &lt;/div&gt;
+   &lt;footer&gt;
+    &lt;p&gt;Posted <time datetime="2009-10-10T14:36-08:00" pubdate="">Thursday</time>.&lt;/p&gt;
+   &lt;/footer&gt;
+  &lt;/article&gt;
+  <em>...more blog posts...</em>
+ &lt;/div&gt;
  &lt;footer&gt;
   &lt;p&gt;Copyright &copy; 2006 The Example Company&lt;/p&gt;
   &lt;p&gt;&lt;a href="about.html"&gt;About&lt;/a&gt; -
@@ -11392,6 +11427,10 @@
  &lt;/footer&gt;
 &lt;/body&gt;</pre>
 
+   <p>Notice the <code><a href="#the-div-element">div</a></code> element being used to wrap all the
+   contents of the page other than the header and footer, and all the
+   contents of the blog entry other than its header and footer.</p>
+
   </div><div class="example">
 
    <p>In the following example, there are two <code><a href="#the-nav-element">nav</a></code>
@@ -11418,15 +11457,17 @@
     &lt;/ul&gt;
    &lt;/nav&gt;
   &lt;/header&gt;
-  &lt;section id="public"&gt;
-   &lt;h1&gt;Public demonstrations&lt;/h1&gt;
-   &lt;p&gt;<em>...more...</em>&lt;/p&gt;
-  &lt;/section&gt;
-  &lt;section id="destroy"&gt;
-   &lt;h1&gt;Demolitions&lt;/h1&gt;
-   &lt;p&gt;<em>...more...</em>&lt;/p&gt;
-  &lt;/section&gt;
-  <em>...more...</em>
+  &lt;div&gt;
+   &lt;section id="public"&gt;
+    &lt;h1&gt;Public demonstrations&lt;/h1&gt;
+    &lt;p&gt;<em>...more...</em>&lt;/p&gt;
+   &lt;/section&gt;
+   &lt;section id="destroy"&gt;
+    &lt;h1&gt;Demolitions&lt;/h1&gt;
+    &lt;p&gt;<em>...more...</em>&lt;/p&gt;
+   &lt;/section&gt;
+   <em>...more...</em>
+  &lt;/div&gt;
   &lt;footer&gt;
    &lt;p&gt;&lt;a href="?edit"&gt;Edit&lt;/a&gt; | &lt;a href="?delete"&gt;Delete&lt;/a&gt; | &lt;a href="?Rename"&gt;Rename&lt;/a&gt;&lt;/p&gt;
   &lt;/footer&gt;
@@ -11464,7 +11505,25 @@
   elements nested within the <code><a href="#the-article-element">article</a></code> element for the Web
   log entry.<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.<h4 id="the-aside-element"><span class="secno">4.4.5 </span>The <dfn><code>aside</code></dfn> element</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i><dl class="element"><dt>Categories</dt>
+  nested <code><a href="#the-article-element">article</a></code> elements.<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:</p>
+
+   <pre>&lt;article&gt;
+ &lt;header&gt;
+  &lt;h1&gt;The Very First Rule of Life&lt;/h1&gt;
+  &lt;p&gt;&lt;time pubdate datetime="2009-10-09T14:28-08:00"&gt;&lt;/time&gt;&lt;/p&gt;
+ &lt;/header&gt;
+ &lt;p&gt;If there's a microphone anywhere near you, assume it's hot and
+ sending whatever you're saying to the world. Seriously.&lt;/p&gt;
+ &lt;p&gt;<em>...</em>&lt;/p&gt;
+ &lt;footer&gt;
+  &lt;a href="?comments=1"&gt;Show comments...&lt;/a&gt;
+ &lt;/footer&gt;
+&lt;/article&gt;</pre>
+
+  </div><h4 id="the-aside-element"><span class="secno">4.4.5 </span>The <dfn><code>aside</code></dfn> element</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i><dl class="element"><dt>Categories</dt>
    <dd><a href="#flow-content">Flow content</a>.</dd>
    <dd><a href="#sectioning-content">Sectioning content</a>.</dd>
    <dd><a href="#formatblock-candidate"><code title="">formatBlock</code> candidate</a>.</dd>
@@ -16086,7 +16145,7 @@
  &lt;p&gt;He would play in the morning, he would play in the evening.&lt;/p&gt;
 &lt;/article&gt;</pre>
 
-  </div><h5 id="alt"><span class="secno">4.8.2.1 </span>Requirements for providing text to act as an alternative for images</h5><p class="XXX annotation"><b>Status: </b><i>Controversial Working Draft</i><p>The requirements for the <code title="attr-img-alt"><a href="#attr-img-alt">alt</a></code>
+  </div><h5 id="alt"><span class="secno">4.8.2.1 </span>Requirements for providing text to act as an alternative for images</h5><p class="XXX annotation"><b>Status: </b><i>Controversial Working Draft. </i><span><a href="http://www.w3.org/html/wg/tracker/issues/31">ISSUE-31</a> (missing-alt) blocks progress to Last Call</span><p>The requirements for the <code title="attr-img-alt"><a href="#attr-img-alt">alt</a></code>
   attribute depend on what the image is intended to represent, as
   described in the following sections.<h6 id="a-link-or-button-containing-nothing-but-the-image"><span class="secno">4.8.2.1.1 </span>A link or button containing nothing but the image</h6><p>When an <a href="#the-a-element">a</a> element that is a <a href="#hyperlink">hyperlink</a>,
   or a <code><a href="#the-button-element">button</a></code> element, has no textual content but

Received on Thursday, 10 September 2009 23:05:34 UTC