main必须全页唯一且不可嵌套，article用于可独立分发的内容（如博客正文、新闻稿），section用于有标题的逻辑分组（如“安装步骤”），nav仅限主导航路径；header/footer可按需嵌套于article或section内。
main 必须全页唯一，article 不是“带标题的 div”，nav 不能套所有链接——写错比不写更伤可访问性和 SEO。
什么时候该用 article 而不是 section
关键看内容能不能被单独分发或订阅：博客正文、新闻稿、用户评论这类有明确作者、发布时间、可独立 URL 的内容，才配用 article；而“安装步骤”“常见问题”这种依附于主文的章节，就该用 section，且必须带 <h2>–<h6> 标题。
容易踩的坑：
- 把登录框、搜索栏、广告位塞进
article—— 它们不是内容，是功能模块 - 用
article套整个首页——破坏了“可独立传播”这个语义前提 -
section没标题就直接闭合——浏览器大纲会断裂，屏幕阅读器跳过它
header 和 footer 可以嵌套使用吗
可以，而且应该。每个 article 或 section 都能有自己的 header 和 footer，比如一篇博客的 header 放标题+作者+time，footer 放标签+分享按钮。
立即学习“前端免费学习笔记（深入）”；
但注意：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 页面级
header和footer是整页最外层的头部/尾部，通常含 logo、主导航、版权信息 -
main里不能嵌header或footer当布局容器用——它们不是 div 替代品，只表达“头部内容”“尾部内容” - 别在
nav里再包一层header——导航本身已是结构角色，加 header 属于语义冗余
nav 的边界在哪
nav 只用于页面主要导航路径：主导航栏、面包屑、分页控件、文章内目录（toc）。它不是“有链接的地方就用”。
典型误用场景：
- 页脚里的“友情链接”列表——该用
aside或普通<ul>，不是nav - 侧边栏的“猜你喜欢”推荐链接——属于辅助内容，归
aside - 文章末尾的“上一篇/下一篇”——如果它是当前内容流的自然延续，可用
nav；但如果只是算法推荐，就别硬套
time、figure 这类小标签为什么不能省
它们不改变视觉，但让机器真正“读懂”内容：time datetime="2026-08-25" 告诉搜索引擎这是发布日期，不是普通文字；figure+figcaption 让图片被 Google 图片搜索收录时带上准确说明。
常被忽略的细节：
-
img缺alt属性——不是语义缺失，是可访问性违规 - 用
<p><em>引用</em></p>代替blockquote——失去引用语义，SEO 权重归零 - 强调关键词只靠 CSS 加粗，不用
strong——屏幕阅读器不会加重语气，语义丢失
语义化最难的部分，不是记不住标签名，而是每次写之前得停一下：这块内容对用户、对机器、对搜索引擎，到底“是谁”。
