html5/spec Overview.html,1.3007,1.3008

Update of /sources/public/html5/spec
In directory hutz:/tmp/cvs-serv14370

Modified Files:
	Overview.html 
Log Message:
<aside> tweaks. (whatwg r3841)

Index: Overview.html
===================================================================
RCS file: /sources/public/html5/spec/Overview.html,v
retrieving revision 1.3007
retrieving revision 1.3008
diff -u -d -r1.3007 -r1.3008
--- Overview.html	14 Sep 2009 08:35:09 -0000	1.3007
+++ Overview.html	14 Sep 2009 09:38:55 -0000	1.3008
@@ -11603,13 +11603,16 @@
   of a page that consists of content that is tangentially related to
   the content around the <code><a href="#the-aside-element">aside</a></code> element, and which could
   be considered separate from that content. Such sections are often
-  represented as sidebars in printed typography.<p>The element can also be used for typographical effects like pull
-  quotes.<p class="note">It's not appropriate to use the <code><a href="#the-aside-element">aside</a></code>
+  represented as sidebars in printed typography.<p>The element can be used for typographical effects like pull
+  quotes or sidebars, for advertising, for groups of <code><a href="#the-nav-element">nav</a></code>
+  elements, and for other content that is considered separate from the
+  main content of the page.<p class="note">It's not appropriate to use the <code><a href="#the-aside-element">aside</a></code>
   element just for parentheticals, since those are part of the main
   flow of the document.<div class="example">
 
    <p>The following example shows how an aside is used to mark up
-   background material on Switzerland in a much longer news story on Europe.</p>
+   background material on Switzerland in a much longer news story on
+   Europe.</p>
 
    <pre>&lt;aside&gt;
  &lt;h1&gt;Switzerland&lt;/h1&gt;
@@ -11643,6 +11646,79 @@
 
 ...</pre>
 
+  </div><div class="example">
+
+   <p>The following extract shows how <code><a href="#the-aside-element">aside</a></code> can be used
+   for blogrolls and other side content on a blog:</p>
+
+   <pre>&lt;body&gt;
+ &lt;header&gt;
+  &lt;h1&gt;My wonderful blog&lt;/h1&gt;
+  &lt;p&gt;My tagline&lt;/p&gt;
+ &lt;/header&gt;
+ &lt;aside&gt;
+  &lt;!-- <em>this aside contains two sections that are tangentially related
+  to the page, namely, links to other blogs, and links to blog posts
+  from this blog</em> --&gt;
+  &lt;nav&gt;
+   &lt;h1&gt;My blogroll&lt;/h1&gt;
+   &lt;ul&gt;
+    &lt;li&gt;&lt;a href="http://blog.example.com/"&gt;Example Blog&lt;/a&gt;
+   &lt;/ul&gt;
+  &lt;/nav&gt;
+  &lt;nav&gt;
+   &lt;h1&gt;Archives&lt;/h1&gt;
+   &lt;ol reversed&gt;
+    &lt;li&gt;&lt;a href="/last-post"&gt;My last post&lt;/a&gt;
+    &lt;li&gt;&lt;a href="/first-post"&gt;My first post&lt;/a&gt;
+   &lt;/ol&gt;
+  &lt;/nav&gt;
+ &lt;/aside&gt;
+ &lt;aside&gt;
+  &lt;!-- <em>this aside is tangentially related to the page also, it
+  contains twitter messages from the blog author</em> --&gt;
+  &lt;h1&gt;Twitter Feed&lt;/h1&gt;
+  &lt;blockquote cite="http://twitter.example.net/t31351234"&gt;
+   &lt;p&gt;I'm on vacation, writing my blog.&lt;/p&gt;
+  &lt;/blockquote&gt;
+  &lt;blockquote cite="http://twitter.example.net/t31219752"&gt;
+   &lt;p&gt;I'm going to go on vacation soon.&lt;/p&gt;
+  &lt;/blockquote&gt;
+ &lt;/aside&gt;
+ &lt;article&gt;
+  &lt;!-- <em>this is a blog post</em> --&gt;
+  &lt;h1&gt;My last post&lt;/h1&gt;
+  &lt;p&gt;This is my last post.&lt;/p&gt;
+  &lt;footer&gt;
+   &lt;p&gt;&lt;a href="/last-post" rel=bookmark&gt;Permalink&lt;/a&gt;
+  &lt;/footer&gt;
+ &lt;/article&gt;
+ &lt;article&gt;
+  &lt;!-- <em>this is also a blog post</em> --&gt;
+  &lt;h1&gt;My last post&lt;/h1&gt;
+  &lt;p&gt;This is my first post.&lt;/p&gt;
+  &lt;aside&gt;
+   &lt;!-- <em>this aside is about the blog post, since it's inside the
+   &lt;article&gt; element; it would be wrong, for instance, to put the
+   blogroll here, since the blogroll isn't really related to this post
+   specifically, only to the page as a whole</em> --&gt;
+   &lt;h1&gt;Posting&lt;/h1&gt;
+   &lt;p&gt;While I'm thinking about it, I wanted to say something about
+   posting. Posting is fun!&lt;/p&gt;
+  &lt;/aside&gt;
+  &lt;footer&gt;
+   &lt;p&gt;&lt;a href="/first-post" rel=bookmark&gt;Permalink&lt;/a&gt;
+  &lt;/footer&gt;
+ &lt;/article&gt;
+ &lt;footer&gt;
+  &lt;nav&gt;
+   &lt;a href="/archives"&gt;Archives&lt;/a&gt; &mdash;
+   &lt;a href="/about"&gt;About me&lt;/a&gt; &mdash;
+   &lt;a href="/copyright"&gt;Copyright&lt;/a&gt;
+  &lt;/nav&gt;
+ &lt;/footer&gt;
+&lt;/body&gt;</pre>
+
   </div><h4 id="the-h1-h2-h3-h4-h5-and-h6-elements"><span class="secno">4.4.6 </span>The <dfn><code>h1</code></dfn>, <dfn><code>h2</code></dfn>,
   <dfn><code>h3</code></dfn>, <dfn><code>h4</code></dfn>,
   <dfn><code>h5</code></dfn>, and <dfn><code>h6</code></dfn>

Received on Monday, 14 September 2009 09:39:09 UTC