为了了解aside元素是干什么用的,先来了解一下官方的定义
The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.
非常绕口的解释,但大意是指aside元素是独立的内容,但与正文有一定的联系。举个例子,一段引用,或是一些注解,都可以用aside标签来处理。
示例一:注解(Pull-quote)
<article>
<header>
<h1>Lorem Ipsum Dolor Sit Amets</h1>
</header>
<p>Aliquam erat volutpat. Vestibulum eleifend pellentesque urna, at
sodales est faucibus sit amet. Praesent in mi dui. <q>Aliquam sed
bibendum nisl. Mauris pharetra enim sit amet ipsum dictum placerat. Sed
lacinia pulvinar iaculis. Nam sit amet hendrerit purus.</q> Sed a urna
laoreet lorem pulvinar fermentum. Aenean vel luctus libero. Ut tincidunt
metus sagittis ante viverra feugiat.</p>
<aside>
<q>Mauris pharetra enim sit amet ipsum dictum placerat.</q>
</aside>
<p>Nulla quis lacus non quam luctus vestibulum. Pellentesque imperdiet
risus gravida ante consectetur fermentum. Vivamus et est nec risus volutpat
elementum. Ut faucibus, lectus consectetur volutpat dapibus, quam diam
luctus enim, vitae mollis enim purus non ante.</p>
</article>
示例二:词汇表(Glossary)
<article>
<header>
<h1>Web Technologies</h1>
</header>
<p>Curabitur dignissim lorem a CSS diam posuere tempor. Nam hendrerit,
eros vel condimentum tempor, ipsum justo cursus justo, quis vestibulum
turpis turpis sit amet tellus. Quisque quis PHP magna eget ipsum faucibus
bibendum at non diam. Sed sapien est, cursus ac ullamcorper id, egestas vel
urna JavaScript. Nullam aliquam dolor vitae quam pharetra auctor.</p>
<aside>
<dl>
<dt>CSS</dt>
<dd>A set of standards for styling documents presented on the
World Wide Web.</dd>
<dt>PHP</dt>
<dd>A server-side scripting language suited to dynamic HTML document
generation for the web.</dd>
<dt>JavaScript</dt>
<dd>A client-side scripting language used for manipulating HTML documents
within a browser.</dd>
</dl>
</aside>
</article>
参考文章:
Understanding aside
This entry was written by , posted on May 6, 2010 at 8:56 am, filed under HTML5. Bookmark the permalink. Follow any comments here with the RSS feed for this post.