[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