[html5] r3796 - [e] (0) <article>, <body>, and related examples.

whatwg at whatwg.org whatwg at whatwg.org
Thu Sep 10 16:09:04 PDT 2009


Author: ianh
Date: 2009-09-10 16:09:03 -0700 (Thu, 10 Sep 2009)
New Revision: 3796

Modified:
   index
   source
Log:
[e] (0) <article>, <body>, and related examples.

Modified: index
===================================================================
--- index	2009-09-10 11:25:24 UTC (rev 3795)
+++ index	2009-09-10 23:09:03 UTC (rev 3796)
@@ -12743,7 +12743,33 @@
   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.</p>
 
+  <div class=example>
 
+   <p>This page updates an indicator to show whether or not the user
+   is online:</p>
+
+   <pre><!DOCTYPE HTML>
+<html>
+ <head>
+  <title>Online or offline?</title>
+  <script>
+   function update(online) {
+     document.getElementById('status').textContent = 
+       online ? 'Online' : 'Offline';
+   }
+  </script>
+ </head>
+ <body ononline="update(true)"
+       onoffline="update(false)"
+       onload="update(navigator.onLine)">
+  <p>You are: <span id="status">(Unknown)</span></p>
+ </body>
+</html></pre>
+
+  </div>
+
+
+
   <h4 id=the-section-element><span class=secno>4.4.2 </span>The <dfn><code>section</code></dfn> element</h4>
 
   <dl class=element><dt>Categories</dt>
@@ -12860,9 +12886,21 @@
    </ul>
   </nav>
  </header>
- <article>
-  <p><em>...page content would be here...</em></p>
- </article>
+ <div>
+  <article>
+   <header>
+    <h1>My Day at the Beach</h1>
+   </header>
+   <div>
+    <p>Today I went to the beach and had a lot of fun.</p>
+    <em>...more content...</em>
+   </div>
+   <footer>
+    <p>Posted <time datetime=2009-10-10T14:36-08:00 pubdate="">Thursday</time>.</p>
+   </footer>
+  </article>
+  <em>...more blog posts...</em>
+ </div>
  <footer>
   <p>Copyright © 2006 The Example Company</p>
   <p><a href="about.html">About</a> -
@@ -12871,6 +12909,10 @@
  </footer>
 </body></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>
@@ -12899,15 +12941,17 @@
     </ul>
    </nav>
   </header>
-  <section id="public">
-   <h1>Public demonstrations</h1>
-   <p><em>...more...</em></p>
-  </section>
-  <section id="destroy">
-   <h1>Demolitions</h1>
-   <p><em>...more...</em></p>
-  </section>
-  <em>...more...</em>
+  <div>
+   <section id="public">
+    <h1>Public demonstrations</h1>
+    <p><em>...more...</em></p>
+   </section>
+   <section id="destroy">
+    <h1>Demolitions</h1>
+    <p><em>...more...</em></p>
+   </section>
+   <em>...more...</em>
+  </div>
   <footer>
    <p><a href="?edit">Edit</a> | <a href="?delete">Delete</a> | <a href="?Rename">Rename</a></p>
   </footer>
@@ -12958,8 +13002,29 @@
   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>
 
+  <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><article>
+ <header>
+  <h1>The Very First Rule of Life</h1>
+  <p><time pubdate datetime="2009-10-09T14:28-08:00"></time></p>
+ </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 href="?comments=1">Show comments...</a>
+ </footer>
+</article></pre>
+
+  </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>Categories</dt>

Modified: source
===================================================================
--- source	2009-09-10 11:25:24 UTC (rev 3795)
+++ source	2009-09-10 23:09:03 UTC (rev 3796)
@@ -13593,7 +13593,33 @@
   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><!DOCTYPE HTML>
+<html>
+ <head>
+  <title>Online or offline?</title>
+  <script>
+   function update(online) {
+     document.getElementById('status').textContent = 
+       online ? 'Online' : 'Offline';
+   }
+  </script>
+ </head>
+ <body ononline="update(true)"
+       onoffline="update(false)"
+       onload="update(navigator.onLine)">
+  <p>You are: <span id="status">(Unknown)</span></p>
+ </body>
+</html></pre>
+
+  </div>
+
+
+
   <h4>The <dfn><code>section</code></dfn> element</h4>
 
   <dl class="element">
@@ -13716,9 +13742,21 @@
    </ul>
   </nav>
  </header>
- <article>
-  <p><em>...page content would be here...</em></p>
- </article>
+ <div>
+  <article>
+   <header>
+    <h1>My Day at the Beach</h1>
+   </header>
+   <div>
+    <p>Today I went to the beach and had a lot of fun.</p>
+    <em>...more content...</em>
+   </div>
+   <footer>
+    <p>Posted <time pubdate datetime="2009-10-10T14:36-08:00">Thursday</time>.</p>
+   </footer>
+  </article>
+  <em>...more blog posts...</em>
+ </div>
  <footer>
   <p>Copyright © 2006 The Example Company</p>
   <p><a href="about.html">About</a> -
@@ -13727,6 +13765,10 @@
  </footer>
 </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">
@@ -13755,15 +13797,17 @@
     </ul>
    </nav>
   </header>
-  <section id="public">
-   <h1>Public demonstrations</h1>
-   <p><em>...more...</em></p>
-  </section>
-  <section id="destroy">
-   <h1>Demolitions</h1>
-   <p><em>...more...</em></p>
-  </section>
-  <em>...more...</em>
+  <div>
+   <section id="public">
+    <h1>Public demonstrations</h1>
+    <p><em>...more...</em></p>
+   </section>
+   <section id="destroy">
+    <h1>Demolitions</h1>
+    <p><em>...more...</em></p>
+   </section>
+   <em>...more...</em>
+  </div>
   <footer>
    <p><a href="?edit">Edit</a> | <a href="?delete">Delete</a> | <a href="?Rename">Rename</a></p>
   </footer>
@@ -13817,8 +13861,29 @@
   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><article>
+ <header>
+  <h1>The Very First Rule of Life</h1>
+  <p><time pubdate datetime="2009-10-09T14:28-08:00"></time></p>
+ </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 href="?comments=1">Show comments...</a>
+ </footer>
+</article></pre>
+
+  </div>
+
+
+
+
   <h4>The <dfn><code>aside</code></dfn> element</h4>
 
   <dl class="element">




More information about the Commit-Watchers mailing list