真正结构化且广泛支持的HTML5标签是、、、、、、,它们定义文档大纲;用于可独立分发内容,仅表主题区块;全局唯一且不得嵌套于其他结构标签内。

哪些 HTML5 标签真正算“结构化”且被浏览器和屏幕阅读器广泛支持
只有具备明确文档大纲语义、能被 关键看内容是否「可独立分发或复用」: 立即学习“前端免费学习笔记(深入)”; 语义标签的价值不在“看起来更规范”,而在 DOM 大纲生成、键盘焦点顺序、屏幕阅读器播报层级和搜索引擎内容权重分配。一旦嵌套错位或滥用,反而比纯 document.body.innerHTML 解析为独立节(sectioning content)的标签,才算真正意义上的 HTML5 结构标签。浏览器原生支持的仅限:、、、、、、。像 不在其中; 已被废弃, 属于内联语义标签,不算结构标签。
和 的核心区别在哪 必须能脱离当前页面单独存在(如博客正文、新闻稿、评论),而 仅表示一个主题区块,依赖上下文(如「产品特性」「用户反馈」这类页面内分组)。误用会导致大纲混乱——例如把多个新闻摘要包进一个 ,屏幕阅读器会将其视为单个不可拆分单元。
内部可嵌套 、,甚至其他 (如评论嵌套) 应有明确的 – 标题,否则语义弱化,部分辅助技术可能忽略 替代
的使用限制和常见错误 在整个文档中**只能出现一次**,且不能是 、、、、 的子元素。很多项目把它当“主内容容器”乱套,结果导致无障碍工具报错或 SEO 识别失败。
( 不能在 内)
( 不能嵌套在 中) 下,与 、、 并列 或 ,而非多个
为什么
不等于「所有导航链接」 专指页面级主导航(如顶部菜单、侧边全局导航、页脚站点地图),不是每个链接组都要套它。面包屑、文章内跳转锚点、分页控件、版权声明里的链接,都不属于 范畴。
+ + aria-label="breadcrumb",更准确表达层级关系,但需确保它是整站统一的翻页逻辑,而非单篇文章内的章节跳转,用户无法快速定位真正重要的导航区 缺失或重复时,Lighthouse 无障碍检测会直接标红,且无法通过 CSS 修复。











