` 表示可独立复用的内容，`` 表示可触发操作的控件。相反，`` 与 `` 是没有额外含义的通用容器。 语义不是外观。一个 `` 可以被 CSS 画得比正文更小，它仍是二级标题；一个带有按钮样式的 `` 仍不是按钮。样式类可以说明设计系统中的角色，但浏览器不会因为类名是 `card-title` 或 `primary-nav` 就获得对应的 HTML 契约。 浏览器解析标记后构建文档对象模型（Document Object Model，DOM）。元素名称、嵌套关系和属性随后参与表单提交、键盘交互、页面导航与可访问性 API 映射。语义化标记把这些能力放在同一个声明中，减少脚本重复实现浏览器行为的需要。 辅助技术可以借助标题、控件名称和地标（landmark）浏览页面。开发者也能从元素名称直接看出结构。不过，语义化元素不是 SEO 排名开关，也不会修复含糊的文案、错误的标题层级或缺失的表单标签。 你会在页面外壳、文章列表、导航、表单、披露控件和搜索结果中使用这些元素。选择元素时应从内容与行为开始，而不是从默认样式或希望出现的 ARIA 角色开始。 ## 工作原理 HTML 解析器根据源码生成 DOM。有效的元素关系会成为树中的父子关系；无效嵌套则可能被解析器修正，实际 DOM 因而不同于源码。模板缩进不足以证明结构正确，语义审查必须查看浏览器生成的 DOM。 浏览器把 DOM 与 CSS 转换为视觉呈现，同时把相关节点映射到平台可访问性 API。后一个结果常被称为可访问性树。原生元素、可访问名称、状态和必要的 ARIA 会共同影响这棵树，但视觉位置不负责定义文档含义。 常用结构元素的职责如下。隐式角色描述常见映射，不等于每个同名元素都会成为地标；上下文与可访问名称会改变结果。 | 元素 | 内容职责 | 常见隐式角色或行为 | | --- | --- | --- | | `` | 页面或一段内容的介绍信息 | 页面范围内通常映射为 `banner` | | `` | 主要导航链接 | `navigation` | | `` | 当前文档独有的主体内容 | `main` | | `` | 可独立分发或复用的完整内容 | `article` | | `` | 有明确主题的通用章节 | 有可访问名称时通常为 `region` | | `