article用于可独立分发的内容（如博客、新闻、评论），section用于依赖上下文的主题分组（如“产品特性”“客户评价”）；判断标准是删掉周围内容后能否单独理解、被RSS订阅或搜索引擎索引。
怎么判断该用 article 还是 section
关键看内容是否“可独立分发”。article 必须能单独拿出来发布、RSS 订阅或被搜索引擎单独索引，比如一篇博客、一条新闻、一个用户评论；section 只是逻辑分组，没有独立性，比如“产品特性”“客户评价”这些区块，即使去掉也不会影响主内容完整性。
常见错误：把整个首页内容包进一个 article —— 它不是“一篇文章”，而是多个内容的集合。正确做法是首页用 main 包裹，内部每个卡片级内容（如每条新闻）各自用 article，而“关于我们”“联系方式”这类栏目则用 section。
-
article可以嵌套article（如评论嵌套在文章里） -
section应该有标题（h2–h6），否则语义弱，不如直接用div - 不要为了“看起来像模块”就硬套
section，无标题 + 无语义 = 回退到div
nav 标签只能用在主导航上吗
不是，但必须满足“导航目的”这个核心语义。主流菜单、页脚链接组、文章内目录（nav + ol）、甚至分页控件（<nav aria-label="分页">）都算合法使用场景。
容易踩的坑：nav 不能包裹广告链接、无关外部跳转（如“关注我们”社交媒体图标），这些属于 aside 或普通链接。另外，nav 内部必须是链接（a）或带 role="link" 的可交互元素，纯文本或按钮会破坏语义。
立即学习“前端免费学习笔记（深入）”；
- 多个
nav是允许的（如顶部主导航 + 侧边工具导航） - 必须加
aria-label或内部含可见标题，否则屏幕阅读器无法区分不同nav - 用
ul/li组织链接仍是最佳实践，不是强制，但能强化列表语义
main 标签为什么不能嵌套在 article 里
因为 main 表示“整份文档的唯一主要内容”，浏览器和辅助技术只认一个。如果把它放进 article，等于说“这篇独立文章里还有另一个页面的主要内容”，逻辑冲突。
实际开发中，main 总是直接位于 body 下，且不与 header、footer、nav 等全局结构重叠。它里面可以放 article、section、aside，但反过来绝对不行。
- 页面有多个
main会导致 Lighthouse 检测失败、屏幕阅读器跳过部分区域 -
article内部需要“主要部分”时，用header/section+ 标题结构代替 - SSR 或微前端场景下，子应用若输出
main，必须由主应用统一收口，避免重复
图片和时间怎么写才算真正语义化
光用 img 和 time 标签只是第一步。关键在属性是否承载真实信息。
img 的 alt 不是“可选描述”，而是替代文本：纯装饰图写 alt=""；信息图需描述图表结论（不是“一张柱状图”）；头像要写人名+角色（alt="张伟，前端工程师"）。
time 的 datetime 属性必须是机器可解析格式（如 "2026-08-25T14:30"），不能写 "昨天" 或 "八月二十五号"。否则屏幕阅读器读不出日期，搜索引擎也无法提取时间维度。
-
figure/figcaption要成对出现，单独用figure包裹图片但没说明文字，语义反而比div+img更差 - 动态生成的时间（如“3小时前”），应同时保留
time[datetime]和可视文本，用 JS 更新可视部分，不碰datetime - SVG 图标若为纯装饰，用
role="presentation"+aria-hidden="true"，别塞alt
语义化最易被忽略的点：它不依赖视觉效果，而依赖结构与属性的真实匹配。写完检查一遍——删掉所有 CSS，用屏幕阅读器听一遍，再看 Lighthouse 的无障碍分数，比任何教程都管用。
