必须用article而非section：当内容能脱离页面独立存在、被rss抓取、转发至社交平台或导出为pdf仍可读时，如博客正文、新闻条目、用户评论（含作者+时间+正文）、带图标题价格的产品卡片；否则应选section或div。
什么时候必须用 article 而不是 section
内容能脱离当前页面、单独被 RSS 抓取、转发到社交平台或导出为 PDF 仍可读，就必须用 article。比如博客正文、新闻条目、用户评论（含作者+时间+正文）、产品卡片（带图+标题+价格+短描述）。
常见错误现象：section 包裹一条新闻摘要——RSS 解析器完全忽略；article 里只放一张图或一个按钮——没信息闭环，语义断裂。
-
article内部建议含<header><h1>...</h1></header>和<time datetime="..."></time>，否则 WCAG 和阅读模式识别率下降 - 同一页面中并列多条同类独立内容（如首页“最新动态”下三条新闻），每条都该是
article，外层用section或main组织 - 不要给标签云、筛选控件、分页导航套
article——它们不是内容单元，只是交互辅助
section 必须带标题，否则等于没写
没有 <h2></h2>–<h6></h6> 的 section 在无障碍树里不出现，Chrome DevTools 的 Accessibility 面板里直接不可见，SEO 也收不到结构信号。
典型误用：给“安装步骤”模块加了 section，但里面只有三段 <p></p>，没任何标题；或者把轮播图外层强行包成 section，还加 aria-label 补救——这属于语义造假，不如老实用 div。
- 标题不必紧贴
section开头，但必须在同一个元素内（比如<section><p>说明</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5806" title="html-deploy"><img src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="overflowclass">html-deploy</a> <p class="overflowclass">使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p> </div> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <h2>技术参数</h2>...</section>合法） - 父级是
<h1></h1>，子section应用<h2></h2>，不能跳级；嵌套section时，层级需递进（h2→h3→h4） - 纯视觉分隔（如加 margin 或 border 就够）、JS 挂载点、背景色容器——别硬套
section，div更诚实也更可控
article 和 section 能互相嵌套吗？怎么嵌才不翻车
能嵌，但方向不能反：大内容单元里分小主题，或小主题下聚合多个独立单元。语义流必须自上而下清晰。
合理嵌套：article 内用 section 划“背景”“方法”“结论”；section 内并列多个 article（如“客户评价”区块里三条带头像+时间+正文的评论）。
- 反例：在
article里再套一层无标题的section包裹标题和首段——多余，<header>+<p></p></header>更干净 - 反例：一个
section下堆了 5 篇博客摘要，却没明确主题包装（比如不是“本周精选”，而是泛泛的“内容列表”）——说明外层不该是section，该用main或div -
section不该替代<nav></nav>、<footer></footer>、<aside></aside>——导航就用nav，页脚就用footer，功能声明比语义模糊的section更有效
不确定用哪个时，两个问题立刻判断
别查文档，直接问自己：
- 这段内容剪下来发到 Twitter 或邮件简报里，别人能看懂吗？能 →
article；不能 →section或div - 这个容器有没有一个能概括全块内容的标题？有 → 可考虑
section；没有 → 别用section，大概率该用div
最常被忽略的其实是标题绑定：很多团队写了 section 却忘了配 h2，结果语义全丢，还误以为“用了语义化标签就达标了”。实际效果可能比不用还差——因为解析器明确收到了一个“有主题但没命名”的信号，反而更困惑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
