当前位置: 首页 > 文档资料 > HTML 宝典 >

2.1.7 aside元素

优质
小牛编辑
134浏览
2023-12-01

aside元素代表跟文档的主内容区相关,但它又独立于主内容区,并且可以被单独拆分出来,而不会对整体内容产生影响。

aside通常表现为侧边栏、说明、提示、引用、附加注释、广告等。如,在经典的页面布局中,页面被分为 header、main、aside、footer 四个部分:

<body>
<header>header</header>
<main>main</main><aside>aside</aside>
<footer>footer</footer>
</body>

上述代码的布局效果如图 2‑2 所示:

经典页面布局
图2-2 经典页面布局

在这个经典布局中,aside 就表现为侧边栏,通常用来放置非主要内容,如个人信息、博客的相关链接、广告等。

考虑到内容优先、可访问性(特别是对使用屏幕阅读器的用户)和SEO,在HTML代码中,应该将 aside元素放在 main 元素之后,然后通过CSS来改变它们的显示顺序。