判断内容能否独立存在，关键在于语义闭环而非长度：单独提取该html片段到新文件中，需能明确传达“是什么、谁发布、何时发布、讲什么”；常见错误包括轮播图、参数表误用article，评论区未为每条评论使用带标题和时间的article，section缺失标题导致无障碍与seo失效。
判断内容能否独立存在，而不是看它长不长
很多人一看到“大段文字”就下意识用 article，一看到“几个小模块”就套 section——这完全反了。关键不是字数或视觉大小，而是语义闭环：把这块 HTML 单独复制出来，粘贴到新文件里打开，能不能让人看懂它是啥、谁写的、什么时候发的、讲了什么。
常见错误现象：
- 首页轮播图每张图都包
article→ 图片没标题、没时间、没上下文，单独存在就是一张图加个 alt 文本，不算独立内容 - 产品页的「参数表」用
article→ 拿掉商品主图和标题后，“尺寸：120×80mm”这句话毫无意义 - 用户评论区只用一个
section包所有评论 → 屏幕阅读器跳过整个区块，因为没标题，也抓不到单条评论的结构
实操建议：
- 每条评论必须是独立
article，且至少含<header><h3>用户名</h3></header>和<time datetime="..."></time> - 「最新评论」这个栏目容器本身用
section，但必须带<h2>最新评论</h2>，否则语义失效 - 纯样式容器（如卡片外层、栅格行）老实用
div，别硬塞语义标签
section 必须配标题，否则等于没写
section 不带标题，在无障碍树里直接消失，Chrome DevTools 的 Accessibility 面板里压根不显示它。搜索引擎也不把它当结构信号，SEO 白做。
使用场景：
- 博客正文内分「背景」「实现步骤」「踩坑记录」→ 每块用
section，标题用<h3></h3>（因为主标题是<h1></h1>或<h2></h2>） - 电商页并列的「规格参数」「用户评价」「售后政策」→ 各自独立用
section，每个都以<h2></h2>开头 - 首页的「国内要闻」「国际快讯」栏目 → 外层
section+<h2></h2>，内部每条新闻用article
容易踩的坑：
- 标题不在
section内部，比如写在前面一个p里 → 语义断裂，读屏软件无法关联 - 用
<span></span>或<div> 模拟标题样式 → 机器看不见，WCAG 不通过 <li>跳级用标题，比如父级是 <code><h1></h1>，section里直接用<h4></h4>→ 结构层级错乱，阅读器导航失序 -
article内部用section分小节（如技术文章里的「环境准备」「代码说明」）→ 小节标题用<h3></h3>，保持层级连续 -
section下并列多个article（如「相关推荐」列表）→ 外层section带<h2></h2>，每篇推荐是完整article - 一个
section里只放一篇article，且没额外主题包装 → 冗余嵌套，DOM 层级无意义增加 - 在「客户案例」
section里混着图片、联系表单、PDF 下载按钮 → 这不是主题分组，是功能拼凑，该用div+ class 控制 -
article里再套一层没标题、没主题的section包首段 → 直接用<header></header>+<p></p>更干净 -
main内优先用article放独立内容（如博客正文），用section划分页面级主题区块（如「作者介绍」「相关资源」） - 不要用
section当页面最外层容器（比如给整页内容包个section）→ HTML5 没有“页面根区块”语义，留空或用main即可 -
aside、nav、footer等有明确语义的区域，别退化成section→ 导航栏写成<section aria-label="主导航"></section>是典型倒退
嵌套方向不能颠倒：article 可含 section，section 不该硬塞 article
嵌套本身合法，但方向错了就会稀释语义。核心逻辑是：大单元里划小主题，或小主题下聚合多个独立单元。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
正确做法：
典型误用：
main 是容器，不是语义替代品
整个页面只能有一个 main，它应包裹全部核心内容区域，不能出现在 header、footer、nav 里。但它不解决 article 和 section 的选择问题——有人以为套个 main 就万事大吉，结果里面全用 div 或乱套 section，语义依然空洞。
实操要点：
最容易被忽略的是标题层级连续性：如果 main 里第一个 article 主标题是 <h2></h2>，那它内部的 section 小节就必须用 <h3></h3>，跳过 h3 直接 h4 会让结构识别失败。
