HTML的aside标签


HTML的aside标签

概述

aside标签是HTML5新增的标签,用于表示文档中的附注、侧边栏、引用、旁注等与主要内容相关但又不需要放到文章正文中的内容。

语法

<aside>
  <!-- 这里是aside标签的内容 -->
</aside>

属性

属性 描述
hidden 表示标签内容是否应该隐藏
class 为标签指定一个或多个类名,用空格分开
id 为标签定义一个唯一标识符
style 为标签指定一个CSS样式,属性与值之间用分号隔开

适用性

aside标签通常用于一些需要与主要内容相关但又并不属于主要内容的内容,例如:

  • 侧边栏、博客小工具
  • 引用、注释和连接列表
  • 广告

实例

<!DOCTYPE html>
<html>
  <head>
    <title>aside标签</title>
  </head>
  <body>
    <h1>主要内容标题</h1>
    <p>主要内容段落</p>
    <aside>
      <h2>这是个侧边栏</h2>
      <p>侧边栏的内容</p>
    </aside>
  </body>
</html>

aside-example

注意事项

  • aside标签的内容不是必须的。
  • aside标签内容应该与主要内容相关,否则的话建议使用其他的标签。
  • aside标签的内容应该不是必须的,即使没有aside标签的内容,主要内容也能够清楚地表达。
  • 如果aside标签内容是与主要内容直接相关的,建议将aside标签放在主要内容的标签内部实现。

总结

aside标签是HTML5新增的标签,用于表示文档中的附注、侧边栏、引用、旁注等与主要内容相关但又不需要放到文章正文中的内容。aside标签的使用要求aside标签内容应该与主要内容相关、不是必须的以及不影响主要内容的理解。