/html

Permalink
Browse files

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

git-svn-id: http://svn.whatwg.org/webapps@3796 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information...
1 parent 11bd9c1 commit b9e681974951ed12a575e477c3ba00d04b84c1f3 @Hixie Hixie committed Sep 10, 2009
Unified Split
Showing with 154 additions and 24 deletions.
  1. +77 −12 index
  2. +77 −12 source
View
89 index
@@ -12743,6 +12743,32 @@ not-slash = %x0000-002E / %x0030-10FFFF
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>&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>
@@ -12860,9 +12886,21 @@ not-slash = %x0000-002E / %x0030-10FFFF
&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; -
@@ -12871,6 +12909,10 @@ not-slash = %x0000-002E / %x0030-10FFFF
&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>
@@ -12899,15 +12941,17 @@ not-slash = %x0000-002E / %x0030-10FFFF
&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;
@@ -12958,6 +13002,27 @@ not-slash = %x0000-002E / %x0030-10FFFF
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>&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>
View
89 source
@@ -13593,6 +13593,32 @@ not-slash = %x0000-002E / %x0030-10FFFF
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>
@@ -13716,9 +13742,21 @@ not-slash = %x0000-002E / %x0030-10FFFF
&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 @@ not-slash = %x0000-002E / %x0030-10FFFF
&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 @@ not-slash = %x0000-002E / %x0030-10FFFF
&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,6 +13861,27 @@ not-slash = %x0000-002E / %x0030-10FFFF
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>

0 comments on commit b9e6819

Please sign in to comment.