Skip to content

/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...
@Hixie
Hixie committed Sep 10, 2009
1 parent 11bd9c1 commit b9e681974951ed12a575e477c3ba00d04b84c1f3
Unified Split
Showing with 154 additions and 24 deletions.
  1. +77 −12 index
  2. +77 −12 source
89 index
View file
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>

&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; -
&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>
&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;
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>
89 source
View file
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>

&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> -
&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">
&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>
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.
You can’t perform that action at this time.