Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
[e] (0) <article>, <body>, and related examples. 
git-svn-id: http://svn.whatwg.org/webapps@3796 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information
@Hixie
Hixie committed Sep 10, 2009
1 parent 11bd9c1 commit b9e6819
Show file tree
Hide file tree
Showing 2 changed files with 154 additions and 24 deletions.
89 changes: 77 additions & 12 deletions index
View file
Expand Up @@ -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>

Expand Down Expand Up @@ -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; -
Expand All @@ -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>
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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>
Expand Down
89 changes: 77 additions & 12 deletions source
View file
Expand Up @@ -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>

Expand Down Expand Up @@ -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> -
Expand All @@ -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">
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down

0 comments on commit b9e6819

Please sign in to comment.