3.1.4 aside元素
aside元素用来表示当前页面或文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条，以及其他类似的有别于主要内容的部分。
aside元素主要有以下两种使用方法。
1）被包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的参考资料、名词解释，等等。这部分代码请看代码清单3-8.
代码清单3-8 文章内部的aside元素示例
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>aside元素示例</title>
</head>
<body>
<header>
<h1>F#入门</h1>
</header>
<article>
<h1>第四节 词法闭包</h1>
<p>lambda表达式可以创建词法闭包…（文章正文）</p>
<aside>
<!-- 因为这个aside元素被放置在一个article元素内部，
所以分析器将这个aside元素的内容理解成是和article元素的内容相关联的。 -->
<h1>名词解释</h1>
<dl>
<dt>F#</dt>
<dd>F#为。Net2010中引入的新型函数型编程语言</dd>
</dl>
<dl>
<dt>词法闭包</dt>
<dd>词法闭包是指，将创建lambda表达式时的环境保存起来…（详细解释）</dd>
</dl>
</aside>
</article>
</body>
程序运行结果如图3-1所示。
图3-1 aside元素示例
这是笔者博客网页中的一篇文章，网页的标题放在了header元素中，在header元素的后面将所有关于文章的部分放在了一个article元素中，将文章的正文部分放在了一个p元素中，但是该文章还有一个名词解释的附属部分，用来解释该文章中的一些名词，因此，在p元素的下部又放置了一个aside元素，用来存放名词解释部分的内容。
2）在article元素之外使用，作为页面或站点全局的附属信息部分。最典型的形式是侧边栏，其中的内容可以是友情链接，博客中其他文章列表、广告单元等。下面这个示例为标准博客网页中一个侧边栏的示例，示例中的"IT新技术"为博客的名称，如代码清单3-9所示。
代码清单3-9 侧边栏示例
<aside>
<nav>
<h2>评论</h2>
<ul>
<li>
<a href="http：//blog.sina.com.cn/1683">erway</a> 10-24 14:25
</li>
<li>
<a href="http：//blog.sina.com.cn/u/1345">太阳雨</a>10-22 23:48<br/>
<a href="http：//blog.sina.com.cn/s/blog_6a9kv8f.html#comment">
顶，拜读一下老牛的文章
</a>
</li>
<li>
<a href="http：//blog.sina.com.cn/u/1259295385">新浪官博</a>
08-12 08:50<br/>
<a href="#">恭喜！您已经成功开通了博客</a>
</li>
</ul>
</nav>
</aside>
如果对这部分再加上CSS样式，在浏览器中的显示效果如图3-2所示。
图3-2 用aside元素实现侧边栏示例
该示例为一个典型的博客网站中的侧边栏部分，因此放在了aside元素中，但是该侧边栏又是具有导航作用的，因此放置在nav元素中，该侧边栏的标题是"评论",放在了h2元素中，在标题之后使用了一个ul列表，用来存放具体的导航链接中。
相关HTML 5与CSS 3权威指南：aside元素[1]