### [语义化标签怎么排：规则与禁区](https://www.huociguo.com/article/1718)

**Published:** 2026-10-02T04:15:35

**Author:** 米了

**Excerpt:** 语义化标签的价值不只在可维护性，还直接影响辅助技术的解析与搜索引擎的理解。排版结构时有几条硬规则，也有几处公认…

语义化标签的价值不只在可维护性，还直接影响辅助技术的解析与搜索引擎的理解。排版结构时有几条硬规则，也有几处公认的禁区。

![结构化文档的层级草图](https://api.huociguo.com/wp-content/uploads/2026/10/pexels-photo-4812922.jpeg)

结构先行，样式随后。图片来自 Pexels。

## 四条规则

规则一：header、nav、main、footer 表达页面级区域。一个页面通常只有一个 main，正文主体全部装在里面，其余三个按职责划分。

规则二：article 表示可独立分发的内容。一篇博客、一条评论、一个商品卡片都算，脱离页面单独阅读仍然成立才用 article。

规则三：section 是带标题的主题分组。没有自然标题的分组不要用 section，用 div 更诚实。

规则四：aside 放与主内容弱相关的补充，侧栏推荐、广告位、术语注解都合适，页面页脚式的全局信息不算 aside。

## 三处禁区

禁区一：h1 到 h6 跳级。标题层级必须连续递进，从 h2 直接跳到 h4 会让屏幕阅读器丢失结构线索。

禁区二：用 div 模拟按钮与链接。原生 button 与 a 自带键盘可达与焦点管理，div 模拟需要补齐一堆 ARIA 属性，成本远高于直接用原生标签。

禁区三：header 套 header 表达层级。header 内部允许放标题与导航，但语义分区应靠 article 或 section 嵌套，而不是 header 叠 header。

结构定稿后再写样式。语义先行，类名与选择器会自然变得简短。

**Tags:** nav元素, 文档大纲, 标题层级, 语义化标签, 页面结构

**Categories:** HTML5

---