HTML宝典(第 1 版)
2.1.7 aside元素
阅读(

HTML基础

HTML元素

结构语义元素

section元素

article元素

main元素

nav元素

header元素

h1~h6元素

aside元素

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来改变它们的显示顺序。

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验