section必须配h2–h6标题才具语义，无标题时等同于div且被读屏器跳过；div明确表示无语义，仅作布局或交互容器；二者功能相同但结构信号截然不同。
main 必须唯一且只包真正要操作的内容，否则屏幕阅读器跳转失效；section 不是 div 的语义替代品，没标题就别硬套；article 用错场景会污染文档大纲，RSS 和读屏都认它是否可独立分发。
数据列表页必须用 main 包裹核心表格或卡片流
用户进页面第一眼要看的数据区域，就是 main 的边界。它不能包含顶部 banner、左侧菜单、分页控件、筛选表单——这些属于辅助导航或操作入口，应放在 nav、aside 或独立 form 中。
- 错误写法：
main里塞了整个header+nav+ 表格 + 分页栏 → 屏幕阅读器按 M 键跳转时定位到顶部空白区 - 正确结构：只把
table或ul（卡片列表）及其直接包裹的caption或h2放进main - Next.js / React 中常见坑：Layout 组件已渲染
main，子页面又加一层 → DOM 出现多个main，辅助技术直接忽略
section 只用于有明确标题的数据模块
section 不是“给 div 换个名字”的语法糖。它代表一个有主题、有上下文、能被单独引用的逻辑块。在数据展示页中，它只适合包装带 h2–h6 的子模块，比如“近30天销售趋势”“各区域订单分布”。
- 别用
section包单个搜索按钮、导出按钮或空状态提示 —— 这些用div更诚实 - 如果模块内没有视觉/语义标题（哪怕只是
<h3>未完成订单</h3>），就别用section；用div+role="region"+aria-labelledby更稳妥 - Google 的文档大纲解析器会把每个
section当作一个独立节点，滥用会导致主内容权重被稀释
article 仅用于可独立分发的数据单元
在数据看板或后台系统中，article 很少出现——它不是“每条记录都该套一层”的标签。它的语义锚点是：这条数据能否脱离当前页面被 RSS 抓取、邮件推送、或作为独立链接分享？
- 适用场景：用户动态流中的每一条发布、审计日志里的单条操作记录、API 响应详情页（URL 可直访）
- 不适用场景：表格里的每一行
tr、ECharts 图表容器、分页器里的数字按钮 - 误用后果：屏幕阅读器生成大量无意义的“article”导航项，用户得反复按 A 键才能跳过；SEO 会误判页面为“多篇文章聚合”，弱化主数据表的权威性
筛选区和分页栏要用 nav + aria-label 显式声明用途
数据页的筛选条件和分页控件不是装饰，而是关键交互路径。仅用 div 或裸 ul 包裹，读屏工具无法识别其导航意图。
- 必须用
nav包裹，且加上aria-label="筛选条件"或aria-label="分页导航" - 内部必须用
ul/ol+li结构，不能用div模拟列表 —— 否则 VoiceOver/Safari 不触发列表遍历模式 - 避免把筛选区和分页栏都塞进同一个
nav：它们语义不同，应拆成两个带不同aria-label的nav元素
最常被忽略的一点：语义标签不解决所有可访问性问题，但一旦 main 错位或 section 滥用，后续所有 ARIA 修补都会事倍功半。先校验 DOM 结构是否干净，再谈细节增强。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
