Permalink
Browse files

[a] (0) <aside> tweaks.

git-svn-id: http://svn.whatwg.org/webapps@3841 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information...
1 parent 7f57633 commit c099b03fe195e5ccd23734d304fc9c0de945d3f2 @Hixie Hixie committed Sep 14, 2009
Showing with 162 additions and 6 deletions.
  1. +81 −3 index
  2. +81 −3 source
View
84 index
@@ -13106,8 +13106,10 @@ not-slash = %x0000-002E / %x0030-10FFFF
be considered separate from that content. Such sections are often
represented as sidebars in printed typography.</p>
- <p>The element can also be used for typographical effects like pull
- quotes.</p>
+ <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>
<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
@@ -13116,7 +13118,8 @@ not-slash = %x0000-002E / %x0030-10FFFF
<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;
@@ -13154,6 +13157,81 @@ isn't his only passion. He also enjoys other pleasures.&lt;/p&gt;
</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>,
View
84 source
@@ -13928,8 +13928,10 @@ not-slash = %x0000-002E / %x0030-10FFFF
be considered separate from that content. Such sections are often
represented as sidebars in printed typography.</p>
- <p>The element can also be used for typographical effects like pull
- quotes.</p>
+ <p>The element can be used for typographical effects like pull
+ quotes or sidebars, for advertising, for groups of <code>nav</code>
+ elements, and for other content that is considered separate from the
+ main content of the page.</p>
<p class="note">It's not appropriate to use the <code>aside</code>
element just for parentheticals, since those are part of the main
@@ -13938,7 +13940,8 @@ not-slash = %x0000-002E / %x0030-10FFFF
<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>
&lt;h1>Switzerland&lt;/h1>
@@ -13976,6 +13979,81 @@ isn't his only passion. He also enjoys other pleasures.&lt;/p>
</div>
+ <div class="example">
+
+ <p>The following extract shows how <code>aside</code> can be used
+ for blogrolls and other side content on a blog:</p>
+
+ <pre>&lt;body>
+ &lt;header>
+ &lt;h1>My wonderful blog&lt;/h1>
+ &lt;p>My tagline&lt;/p>
+ &lt;/header>
+ &lt;aside>
+ &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> -->
+ &lt;nav>
+ &lt;h1>My blogroll&lt;/h1>
+ &lt;ul>
+ &lt;li>&lt;a href="http://blog.example.com/">Example Blog&lt;/a>
+ &lt;/ul>
+ &lt;/nav>
+ &lt;nav>
+ &lt;h1>Archives&lt;/h1>
+ &lt;ol reversed>
+ &lt;li>&lt;a href="/last-post">My last post&lt;/a>
+ &lt;li>&lt;a href="/first-post">My first post&lt;/a>
+ &lt;/ol>
+ &lt;/nav>
+ &lt;/aside>
+ &lt;aside>
+ &lt;!-- <em>this aside is tangentially related to the page also, it
+ contains twitter messages from the blog author</em> -->
+ &lt;h1>Twitter Feed&lt;/h1>
+ &lt;blockquote cite="http://twitter.example.net/t31351234">
+ &lt;p>I'm on vacation, writing my blog.&lt;/p>
+ &lt;/blockquote>
+ &lt;blockquote cite="http://twitter.example.net/t31219752">
+ &lt;p>I'm going to go on vacation soon.&lt;/p>
+ &lt;/blockquote>
+ &lt;/aside>
+ &lt;article>
+ &lt;!-- <em>this is a blog post</em> -->
+ &lt;h1>My last post&lt;/h1>
+ &lt;p>This is my last post.&lt;/p>
+ &lt;footer>
+ &lt;p>&lt;a href="/last-post" rel=bookmark>Permalink&lt;/a>
+ &lt;/footer>
+ &lt;/article>
+ &lt;article>
+ &lt;!-- <em>this is also a blog post</em> -->
+ &lt;h1>My last post&lt;/h1>
+ &lt;p>This is my first post.&lt;/p>
+ &lt;aside>
+ &lt;!-- <em>this aside is about the blog post, since it's inside the
+ &lt;article> 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> -->
+ &lt;h1>Posting&lt;/h1>
+ &lt;p>While I'm thinking about it, I wanted to say something about
+ posting. Posting is fun!&lt;/p>
+ &lt;/aside>
+ &lt;footer>
+ &lt;p>&lt;a href="/first-post" rel=bookmark>Permalink&lt;/a>
+ &lt;/footer>
+ &lt;/article>
+ &lt;footer>
+ &lt;nav>
+ &lt;a href="/archives">Archives&lt;/a> &mdash;
+ &lt;a href="/about">About me&lt;/a> &mdash;
+ &lt;a href="/copyright">Copyright&lt;/a>
+ &lt;/nav>
+ &lt;/footer>
+&lt;/body></pre>
+
+ </div>
+
<h4>The <dfn><code>h1</code></dfn>, <dfn><code>h2</code></dfn>,

0 comments on commit c099b03

Please sign in to comment.