[html5] r3841 - [a] (0) <aside> tweaks.
whatwg at whatwg.org
whatwg at whatwg.org
Mon Sep 14 02:44:13 PDT 2009
Author: ianh
Date: 2009-09-14 02:44:12 -0700 (Mon, 14 Sep 2009)
New Revision: 3841
Modified:
index
source
Log:
[a] (0) <aside> tweaks.
Modified: index
===================================================================
--- index 2009-09-14 08:40:26 UTC (rev 3840)
+++ index 2009-09-14 09:44:12 UTC (rev 3841)
@@ -13106,8 +13106,10 @@
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 @@
<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><aside>
<h1>Switzerland</h1>
@@ -13154,8 +13157,83 @@
</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><body>
+ <header>
+ <h1>My wonderful blog</h1>
+ <p>My tagline</p>
+ </header>
+ <aside>
+ <!-- <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> -->
+ <nav>
+ <h1>My blogroll</h1>
+ <ul>
+ <li><a href="http://blog.example.com/">Example Blog</a>
+ </ul>
+ </nav>
+ <nav>
+ <h1>Archives</h1>
+ <ol reversed>
+ <li><a href="/last-post">My last post</a>
+ <li><a href="/first-post">My first post</a>
+ </ol>
+ </nav>
+ </aside>
+ <aside>
+ <!-- <em>this aside is tangentially related to the page also, it
+ contains twitter messages from the blog author</em> -->
+ <h1>Twitter Feed</h1>
+ <blockquote cite="http://twitter.example.net/t31351234">
+ <p>I'm on vacation, writing my blog.</p>
+ </blockquote>
+ <blockquote cite="http://twitter.example.net/t31219752">
+ <p>I'm going to go on vacation soon.</p>
+ </blockquote>
+ </aside>
+ <article>
+ <!-- <em>this is a blog post</em> -->
+ <h1>My last post</h1>
+ <p>This is my last post.</p>
+ <footer>
+ <p><a href="/last-post" rel=bookmark>Permalink</a>
+ </footer>
+ </article>
+ <article>
+ <!-- <em>this is also a blog post</em> -->
+ <h1>My last post</h1>
+ <p>This is my first post.</p>
+ <aside>
+ <!-- <em>this aside is about the blog post, since it's inside the
+ <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> -->
+ <h1>Posting</h1>
+ <p>While I'm thinking about it, I wanted to say something about
+ posting. Posting is fun!</p>
+ </aside>
+ <footer>
+ <p><a href="/first-post" rel=bookmark>Permalink</a>
+ </footer>
+ </article>
+ <footer>
+ <nav>
+ <a href="/archives">Archives</a> —
+ <a href="/about">About me</a> —
+ <a href="/copyright">Copyright</a>
+ </nav>
+ </footer>
+</body></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>
Modified: source
===================================================================
--- source 2009-09-14 08:40:26 UTC (rev 3840)
+++ source 2009-09-14 09:44:12 UTC (rev 3841)
@@ -13928,8 +13928,10 @@
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 @@
<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><aside>
<h1>Switzerland</h1>
@@ -13976,8 +13979,83 @@
</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><body>
+ <header>
+ <h1>My wonderful blog</h1>
+ <p>My tagline</p>
+ </header>
+ <aside>
+ <!-- <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> -->
+ <nav>
+ <h1>My blogroll</h1>
+ <ul>
+ <li><a href="http://blog.example.com/">Example Blog</a>
+ </ul>
+ </nav>
+ <nav>
+ <h1>Archives</h1>
+ <ol reversed>
+ <li><a href="/last-post">My last post</a>
+ <li><a href="/first-post">My first post</a>
+ </ol>
+ </nav>
+ </aside>
+ <aside>
+ <!-- <em>this aside is tangentially related to the page also, it
+ contains twitter messages from the blog author</em> -->
+ <h1>Twitter Feed</h1>
+ <blockquote cite="http://twitter.example.net/t31351234">
+ <p>I'm on vacation, writing my blog.</p>
+ </blockquote>
+ <blockquote cite="http://twitter.example.net/t31219752">
+ <p>I'm going to go on vacation soon.</p>
+ </blockquote>
+ </aside>
+ <article>
+ <!-- <em>this is a blog post</em> -->
+ <h1>My last post</h1>
+ <p>This is my last post.</p>
+ <footer>
+ <p><a href="/last-post" rel=bookmark>Permalink</a>
+ </footer>
+ </article>
+ <article>
+ <!-- <em>this is also a blog post</em> -->
+ <h1>My last post</h1>
+ <p>This is my first post.</p>
+ <aside>
+ <!-- <em>this aside is about the blog post, since it's inside the
+ <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> -->
+ <h1>Posting</h1>
+ <p>While I'm thinking about it, I wanted to say something about
+ posting. Posting is fun!</p>
+ </aside>
+ <footer>
+ <p><a href="/first-post" rel=bookmark>Permalink</a>
+ </footer>
+ </article>
+ <footer>
+ <nav>
+ <a href="/archives">Archives</a> —
+ <a href="/about">About me</a> —
+ <a href="/copyright">Copyright</a>
+ </nav>
+ </footer>
+</body></pre>
+
+ </div>
+
+
+
<h4>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>
More information about the Commit-Watchers
mailing list