语义化结构:让浏览器和辅助技术「读得出区块」

紫色角标是这里的演示标注,标出每块用的标签。同一个页面全用 <div> 也能长这样,但读屏的「地标导航」列表会是空的。

header

技术小站

main
article

第一篇独立内容

article:拿出来单独放进信息流也依然成立的内容(一篇博客、一条评论、一个商品卡)。

section

正文的一个分区

section:整页的一部分,不能独立存在。给 section 配一个标题,否则等于白写。

三条选择规则

  1. 一页一个 <main>(可以有隐藏的其它 main 例外,但别这么干);页头页脚用 header/footer,导航用 nav。
  2. header、footer、nav、article、section、aside 在各自的父区块里都可以再出现一次——比如 <article> 内部有自己的 <header>,这不违反唯一性。
  3. 分不清就退回 <div>:语义标签只在你确实表达「这是一块导航」「这是一篇独立文章」时才用。硬套 section 比 div 更糟,因为它向辅助技术承诺了一个区块标题。