示例一：包含在article中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的参考资料、名称解释等。
<!DOCTYPE html> <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> </html>
示例二：在article之外元素使用，作为页面或站点全局的附属信息部分。例如友情链接、博客中其他文章列表或广告单元等。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>aside元素示例</title> <style> *{ margin:0; padding:0; } ul,li{ list-style:none; } a{ text-decoration: none; } .aside{ width: 400px; height: 400px; margin:100px auto; border: 2px solid black; padding:10px; background:rgba(113,112,112,.24); } .ul{ margin-left: 20px; } .ul li{ height: 35px; line-height: 35px; text-align: right; padding: 10px 0 15px; border-bottom: 1px dashed #666; } .ul li a{ float: left; } </style> </head> <body> <aside class="aside"> <nav> <h2>评论</h2> <ul class="ul"> <li> <a href="#">erway</a> 07-02 21:57 </li> <li> <a href="#">NEgei</a> 06-30 23:03 <a href="#">赞赞赞，大牛舅服你</a> </li> <li> <a href="#">系统消息</a> 06-05 10:14 </li> </ul> </nav> </aside> </body> </html>
效果图如下所示：
