语义化结构的核心是确保辅助技术准确识别页面区域并支持逻辑导航：必须正确使用、、/三类地标标签，标题层级连续，容器标签匹配内容角色，DOM顺序符合阅读流。

语义化结构不是让页面“看起来更专业”，而是让屏幕阅读器能准确识别导航、正文、侧栏等区域，从而支持快捷跳转和逻辑朗读。关键不在标签数量，而在每个标签是否承载真实语义、位置是否符合规范、层级是否连贯。

必须用对的三个核心地标标签

：不能用

替代。它自带 role="navigation"，NVDA/VoiceOver 支持按 N 键直接跳入。多个导航（如顶部主导航、页脚面包屑）必须加 aria-label 区分，否则全读作“导航”。

：全页唯一，且必须是

的直接子元素。不能嵌在

、

或

里；里面只放用户真正要读/操作的内容，广告、登录框、弹窗都得排除。

和

：它们本身不构成地标，但常用来包裹

或版权信息。注意

不等于“页面顶部所有东西”，比如文章页的标题和作者信息应放在

内的

，而非全局

。

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

标题层级必须连续且反映真实内容结构

屏幕阅读器靠

–

构建文档大纲。断层会导致跳转错乱或跳过整块内容：

• 从

  直接跳到

  ，中间缺失

  ，部分读屏工具会把

  当作新章节起点

页眉里的

（如网站Logo）不能替代文章主标题；正文应有独立

或

，且放在

或

内部

避免仅靠 CSS 改变视觉大小来“伪装”标题，必须用正确的 heading 标签

用对语义容器，别让机器猜内容角色

不是所有 HTML5 标签都对辅助技术有效，只有具备隐含 role、可计算 name 的才被识别为导航节点：

• ：适合可独立分发、复用的内容，如博客、新闻、商品卡片；搜索引擎和读屏器都会赋予更高权重
• ：仅用于与主内容相关但可分离的信息，如作者简介、相关链接；不要塞广告或导航
• ：需有明确主题和标题（

  –

  ），不能空套；没有标题的

  建议换用

  、

  、

  +

  这类标签自带机器可解析元数据，比纯文本 + class 更可靠

  DOM顺序必须匹配用户预期的阅读流

  屏幕阅读器按 DOM 顺序线性朗读，视觉上右置的侧边栏如果写在

  前面，就会先读侧栏再读正文——这违背用户心智模型：

  • 源码中
    应尽可能靠前，尤其在单页应用中，避免被

    或广告代码拖后
  • 用 CSS Flex/Grid 布局时，禁止用 order 属性打乱语义顺序；视觉调整不等于结构重排
  • 模态框、通知条等临时内容，应在 DOM 中插入到
    后或 底部，并用 aria-modal="true" 和 aria-hidden 控制焦点和朗读范围

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！