语义化标签与标题层级
Semantic HTML
中级网页语义化标签与标题层级（Semantic HTML）是用网页元素表达内容的角色，并用标题级别组织内容结构。它让浏览器和辅助技术更容易理解页面，也方便你检查 AI 生成的网页是否只有外观、没有清晰结构。
你可能会说：「帮我把这个页面做得有结构：读屏工具能分清导航、正文和各级标题，不只是看起来排版整齐。」
读之前建议先了解
动手看看入职指南的结构检查
团队知识库
首页 入职指南
新同事入职
入职前准备先确认设备、账号和第一天的安排。
查看清单
结构检查 · 已识别
标题大纲
H1 新同事入职
H2 入职前准备
元素角色
header · 页眉
nav · 导航
main · 主内容
页面标记
跳过二级标题
看上面的入职页面，再切换「页面标记」：外观几乎一样，下面的标题大纲和元素角色却不同。也可以用 Tab 聚焦「查看清单」。
要点网页的语义和标题层级怎么组织？
- 1
标签表达内容的实际角色
做产品说明页时，导航用导航区域，主要内容用主内容区域，操作用按钮。因为这些元素带有角色信息，所以浏览器和辅助技术不必只靠外观猜测它们的用途。
- 2
标题级别表达内容的从属关系
你可以把页面主标题看作整页主题，把下一级标题用于主要章节，再用更低一级标题细分章节。标题级别说的是内容关系，不是字号；想让字变大，可以交给样式处理。
- 3
检查结构不能只看截图
AI 可能把所有标题都做成醒目的文字，却没有给出对应的标题结构。验收时，你可以对照页面内容逐级查看：每个章节是否有合适的标题，读屏用户能否据此找到想看的部分。
容易混淆的地方
它和视觉层级有关，但不是一回事：视觉层级靠字号、颜色和间距引导视线，语义化标签与标题层级则表达内容及元素的角色，两者最好相互吻合。它也不等于页面标题；页面标题是浏览器标签页等位置显示的名称，正文标题负责组织页面内的内容。
什么时候用
适合用
- 让 AI Agent 生成产品官网或帮助中心页面时，用它说明导航、正文、章节和操作各是什么，便于验收结构。
- 重构后台详情页时，用它梳理页面主标题、信息分区和分区内的小标题，避免只靠字号区分内容。
- 检查网页的无障碍体验时，用它核对读屏用户能否按标题浏览内容、识别主要区域。
不适合用
- 做原生手机 App 界面时，不用 HTML 标签来组织页面；改用平台提供的无障碍角色和标题信息。
- 交付一张静态宣传图片时，图片内部没有网页标题层级可设置；如果图片承载关键信息，另提供文字说明。
- 设计只返回数据的 API 时，不涉及网页内容结构；改用清楚的字段命名和接口文档表达数据含义。
练一练选一个答案，看看解释
你让 AI 制作一页产品帮助文档。页面截图里各节标题大小分明，但读屏工具很难按章节跳转。下一步最合适的要求是什么？
让 AI 帮你做复制给 AI Agent 直接用
请检查并调整这个网页的语义化标签与标题层级：按实际用途区分导航、主内容、章节、链接和按钮；按内容从属关系安排各级标题，不要为了字号选择标题级别。保留现有视觉设计，并说明你改了哪些结构。