|
|
|
|
|
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> |
|
|
|
|
|
|
|
</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> - |
|
|
|
|
</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> |
|
|
|
|
</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> |
|
|
|
|
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> |