HTML Standard Tracker

Diff (omit for latest revision)
Filter

Short URL: http://html5.org/r/3796

File a bug

SVNBugCommentTime (UTC)
3796<article>, <body>, and related examples.2009-09-10 23:09
Index: source
===================================================================
--- source	(revision 3795)
+++ source	(revision 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>&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">
@@ -13716,9 +13742,21 @@
    &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> -
@@ -13727,6 +13765,10 @@
  &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">
@@ -13755,15 +13797,17 @@
     &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>
@@ -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>&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">

|