《HTML 5与CSS 3 权威指南（第4版·上册）》 —3.1.4　aside元素

3.1.4　aside元素

aside元素用来表示当前页面或文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条，以及其他类似的有别于主要内容的部分。

aside元素主要有以下两种使用方法。

1）包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的参考资料、名词解释等。

这部分代码如代码清单3-8所示。

代码清单3-8　文章内部的aside元素示例

程序运行结果如图3-1所示。

图3-1　aside元素示例

这是笔者博客网页中的一篇文章，网页的标题放在header元素中，在header元素的后面将所有关于文章的部分放在一个article元素中，将文章的正文部分放在一个p元素中，但是该文章还有一个名词解释的附属部分，用来解释该文章中的一些名词，因此，在p元素的下部又放置了一个aside元素，用来存放名词解释部分的内容。

2）在article之外元素使用，作为页面或站点全局的附属信息部分。最典型的形式是侧边栏，其中的内容可以是友情链接、博客中其他文章列表或广告单元等。

下面这个示例为标准博客网页中一个侧边栏的示例，示例中的“IT新技术”为博客的名称，如代码清单3-9所示。

代码清单3-9　侧边栏示例

如果对这部分也加上CSS样式，在浏览器中的显示效果如图3-2所示。

该示例为一个典型的博客网站中的侧边栏部分，因此被放在aside元素中，但是该侧边栏又具有导航的作用，因此被放置在nav元素中，该侧边栏的标题是“评论”，被放在h2元素中，在标题之后使用一个ul列表，用来存放具体的导航链接。