aside元素代表跟文档的主内容区相关,但它又独立于主内容区,并且可以被单独拆分出来,而不会对整体内容产生影响。
aside通常表现为侧边栏、说明、提示、引用、附加注释、广告等。如,在经典的页面布局中,页面被分为 header、main、aside、footer 四个部分:
<body>
<header>header</header>
<main>main</main><aside>aside</aside>
<footer>footer</footer>
</body>
上述代码的布局效果如图 2‑2 所示:
在这个经典布局中,aside 就表现为侧边栏,通常用来放置非主要内容,如个人信息、博客的相关链接、广告等。
考虑到内容优先、可访问性(特别是对使用屏幕阅读器的用户)和SEO,在HTML代码中,应该将 aside元素放在 main 元素之后,然后通过CSS来改变它们的显示顺序。