HTML Standard Tracker

Filter

File a bug

SVNBugCommentTime (UTC)
3796<article>, <body>, and related examples.2009-09-10 23:09
@@ -13586,20 +13586,46 @@ not-slash     = %x0000-002E / %x0030-10FFFF
   the event would bubble from the target, to the <code>body</code>, to
   the <code>html</code>, to the <code>Document</code>, to the
   <code>Window</code>, and the <span title="event handler
   attributes">event handler attribute</span> on the <code>body</code>
   is watching the <code>Window</code> not the <code>body</code>. A
   regular event listener attached to the <code>body</code> using <code
   title="">addEventListener()</code>, however, would fire when the
   event bubbled through the <code>body</code> and not when it reaches
   the <code>Window</code> object.</p>
 
+  <div class="example">
+
+   <p>This page updates an indicator to show whether or not the user
+   is online:</p>
+
+   <pre>&lt;!DOCTYPE HTML>
+&lt;html>
+ &lt;head>
+  &lt;title>Online or offline?&lt;/title>
+  &lt;script>
+   function update(online) {
+     document.getElementById('status').textContent = 
+       online ? 'Online' : 'Offline';
+   }
+  &lt;/script>
+ &lt;/head>
+ &lt;body ononline="update(true)"
+       onoffline="update(false)"
+       onload="update(navigator.onLine)">
+  &lt;p>You are: &lt;span id="status">(Unknown)&lt;/span>&lt;/p>
+ &lt;/body>
+&lt;/html></pre>
+
+  </div>
+
+
 
   <h4>The <dfn><code>section</code></dfn> element</h4>
 
   <dl class="element">
    <dt>Categories</dt>
    <dd><span>Flow content</span>.</dd>
    <dd><span>Sectioning content</span>.</dd>
    <dd><span><code title="">formatBlock</code> candidate</span>.</dd>
    <dt>Contexts in which this element may be used:</dt>
    <dd>Where <span>flow content</span> is expected.</dd>
@@ -13709,31 +13735,47 @@ not-slash     = %x0000-002E / %x0030-10FFFF
   &lt;p>Last Modified: &lt;time>2009-04-01&lt;/time>&lt;/p>
   &lt;nav>
    &lt;h1>Navigation&lt;/h1>
    &lt;ul>
     &lt;li>&lt;a href="articles.html">Index of all articles&lt;/a>&lt;/li>
     &lt;li>&lt;a href="today.html">Things sheeple need to wake up for today&lt;/a>&lt;/li>
     &lt;li>&lt;a href="successes.html">Sheeple we have managed to wake&lt;/a>&lt;/li>
    &lt;/ul>
   &lt;/nav>
  &lt;/header>
- &lt;article>
-  &lt;p><em>...page content would be here...</em>&lt;/p>
- &lt;/article>
+ &lt;div>
+  &lt;article>
+   &lt;header>
+    &lt;h1>My Day at the Beach&lt;/h1>
+   &lt;/header>
+   &lt;div>
+    &lt;p>Today I went to the beach and had a lot of fun.&lt;/p>
+    <em>...more content...</em>
+   &lt;/div>
+   &lt;footer>
+    &lt;p>Posted <time pubdate datetime="2009-10-10T14:36-08:00">Thursday</time>.&lt;/p>
+   &lt;/footer>
+  &lt;/article>
+  <em>...more blog posts...</em>
+ &lt;/div>
  &lt;footer>
   &lt;p>Copyright &copy; 2006 The Example Company&lt;/p>
   &lt;p>&lt;a href="about.html">About&lt;/a> -
      &lt;a href="policy.html">Privacy Policy&lt;/a> -
      &lt;a href="contact.html">Contact Us&lt;/a>&lt;/p>
  &lt;/footer>
 &lt;/body></pre>
 
+   <p>Notice the <code>div</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>nav</code>
    elements, one for primary navigation around the site, and one for
    secondary navigation around the page itself.</p>
 
    <pre>&lt;body>
  &lt;h1>The Wiki Center Of Exampland&lt;/h1>
@@ -13748,29 +13790,31 @@ not-slash     = %x0000-002E / %x0030-10FFFF
   &lt;header>
    &lt;h1>Demos in Exampland&lt;/h1>
    &lt;nav>
     &lt;ul>
      &lt;li>&lt;a href="#public">Public demonstrations&lt;/a>&lt;/li>
      &lt;li>&lt;a href="#destroy">Demolitions&lt;/a>&lt;/li>
      <em>...more...</em>
     &lt;/ul>
    &lt;/nav>
   &lt;/header>
-  &lt;section id="public">
-   &lt;h1>Public demonstrations&lt;/h1>
-   &lt;p><em>...more...</em>&lt;/p>
-  &lt;/section>
-  &lt;section id="destroy">
-   &lt;h1>Demolitions&lt;/h1>
-   &lt;p><em>...more...</em>&lt;/p>
-  &lt;/section>
-  <em>...more...</em>
+  &lt;div>
+   &lt;section id="public">
+    &lt;h1>Public demonstrations&lt;/h1>
+    &lt;p><em>...more...</em>&lt;/p>
+   &lt;/section>
+   &lt;section id="destroy">
+    &lt;h1>Demolitions&lt;/h1>
+    &lt;p><em>...more...</em>&lt;/p>
+   &lt;/section>
+   <em>...more...</em>
+  &lt;/div>
   &lt;footer>
    &lt;p>&lt;a href="?edit">Edit&lt;/a> | &lt;a href="?delete">Delete&lt;/a> | &lt;a href="?Rename">Rename&lt;/a>&lt;/p>
   &lt;/footer>
  &lt;/article>
  &lt;footer>
   &lt;p>&lt;small>&copy; copyright 1998 Exampland Emperor&lt;/small>&lt;/p>
  &lt;/footer>
 &lt;/body></pre>
 
   </div>
@@ -13810,20 +13854,41 @@ not-slash     = %x0000-002E / %x0030-10FFFF
   principle related to the contents of the outer article. For
   instance, a Web log 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 Web
   log 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>
 
+  <div id="article-example" class="example">
+
+   <p>This example shows a blog post using the <code>article</code>
+   element:</p>
+
+   <pre>&lt;article>
+ &lt;header>
+  &lt;h1>The Very First Rule of Life&lt;/h1>
+  &lt;p>&lt;time pubdate datetime="2009-10-09T14:28-08:00">&lt;/time>&lt;/p>
+ &lt;/header>
+ &lt;p>If there's a microphone anywhere near you, assume it's hot and
+ sending whatever you're saying to the world. Seriously.&lt;/p>
+ &lt;p><em>...</em>&lt;/p>
+ &lt;footer>
+  &lt;a href="?comments=1">Show comments...&lt;/a>
+ &lt;/footer>
+&lt;/article></pre>
+
+  </div>
+
+
 
 
   <h4>The <dfn><code>aside</code></dfn> element</h4>
 
   <dl class="element">
    <dt>Categories</dt>
    <dd><span>Flow content</span>.</dd>
    <dd><span>Sectioning content</span>.</dd>
    <dd><span><code title="">formatBlock</code> candidate</span>.</dd>
    <dt>Contexts in which this element may be used:</dt>

|