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