section必须配h2及以上标题否则被忽略，article需独立可读且含作者时间等信息，嵌套关系为section包裹多个article而非相反，无语义容器应使用div。
section里没写就等于没写
浏览器和屏幕阅读器会直接忽略无标题的 section。它在无障碍树里不出现，SEO 也收不到结构信号。不是“写了就行”，而是必须配 <h2></h2> 或更高级别标题（不能跳级，比如父级是 <h1></h1>，子 section 就得用 <h2></h2>）。
常见错误：首页轮播图外层套了 section 却没标题；产品页的“参数表”区块用了 section 但里面只有表格没 <h2></h2> —— 这两种情况都该换回 div 或补标题。
article必须能“剪下来发 Twitter”
判断是不是 article，只看一条：把这段内容单独复制粘贴到新 HTML 文件里打开，读者能不能看懂？能 → article；不能 → 不是。
典型正确用法：
• 每条用户评论用 article 包裹（含作者、时间、正文）
• 聚合页里的每篇新闻摘要用 article
• 博客正文整体用 article（且内部必须有 <header><h1></h1></header> 和 <time></time>）
常见误用：
• 把“相关推荐”列表里的文章全塞进一个 section 里，不加 article → RSS 解析器抓不到任何一条
• 给商品图+购买按钮组合硬套 article → 它不是独立内容，只是功能组件
嵌套关系不能反着来
article 可以包含多个 section（比如一篇长教程分“准备”“操作”“排错”三块），每块还得带 <h3></h3>；但反过来，一个 section 下堆 5 篇博客摘要，却不给每篇套 article，就是错的。
关键逻辑：
• section 是“主题容器”，比如首页的“国内要闻”栏目
• 这个栏目里放 3 条新闻 → 每条用 article，外层 section 带 <h2>国内要闻</h2>
• 如果栏目里只有一条新闻，依然要外层 section + 内部 article，而不是直接把新闻内容塞进 section
不确定时，先删掉周围内容试试
把你要标记的那块内容单独拎出来，去掉页面其他所有东西，只留它自己：
• 还能读出谁写的、什么时候发的、讲的是什么事？→ article
• 只剩半句话，比如“安装步骤：1. 下载…”，离开上下文完全不知所云？→ section（且必须立刻补上 <h2></h2>）
• 纯视觉容器，比如轮播图挂载点、JS 渲染区、背景色卡片？→ 别硬套语义标签，老实用 div
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
