<section>必须有<h2>–<h6>标题，否则语义失效；它用于可命名、跳转、独立理解的功能节，如“核心功能”“客户案例”，而非布局容器；无标题或仅靠class命名的<section>应改用<div>。

<section> 不是用来“包内容”的，而是用来标记“能被命名、跳转、单独理解”的功能节。没标题的 <section> 基本等于废标签——它不报错，但语义断裂，读屏器跳过、SEO 权重稀释、三个月后你自己都看不懂那块在干啥。

什么时候必须用 <section> 而不是 <div>

判断只看一条：这块内容能不能被 RSS 抓取、被别人单独链接分享、或出现在浏览器自动生成的大纲里（按 F6 或用 HTML5 Outliner 验证）？能，就该是 <section> 或 <article>；不能，就老实用 <div>。

• ✅ 适合 <section>：产品页里的「核心功能」「客户案例」「技术参数」——每项有明确主题，且彼此并列
• ❌ 不适合 <section>：导航栏里的下拉菜单、卡片网格容器、加载中的旋转图标——它们只是布局/交互单元，无独立语义
• ⚠️ 危险信号：你给 <section> 加了 class="feature-card" 却没配 <h2>，说明它大概率不该是 <section>

<section> 必须带标题？为什么 <h2>–<h6> 才行

HTML5 规范写明：<section> “通常应有标题”。实际中，没有 <h2>–<h6> 的 <section> 会丢失全部语义价值。不是浏览器不渲染，而是辅助技术无法建立层级，大纲工具直接忽略它。

• 标题必须是 <h2>–<h6>，<h1> 应留给整个页面主标题（<main> 外）
• 同一级 <section> 的标题级别要一致（比如全是 <h2>），否则大纲结构错乱
• 可以用 <header> 包裹标题+副文本，但标题元素本身不能缺

<section> 和 <article> 到底谁套谁

<article> 是可独立存在、可分发的内容单元（比如一篇博客、一条评论）；<section> 是为组织服务的逻辑分组，依赖上下文。它们不是父子关系，而是协作关系。

• ✅ 正确：一个 <article> 里嵌多个 <section>（如「背景」「实现」「测试」）
• ✅ 正确：一个 <main> 下并列多个 <section>（如 FAQ 分组、功能介绍、使用指南）
• ❌ 错误：把整页主内容塞进一个 <section> ——这反而模糊了结构
• ❌ 错误：在 <section> 里硬塞多个 <article> 却不加列表语义（该用 <ol>/<ul> 包一层）

容易被忽略的兼容与维护细节

IE8 不识别 <section>，但不影响渲染——只是语义全丢。真正麻烦的是人：三个月后你回看代码，如果看到 <section id="block-7"> 却没标题，你就得花两分钟猜它到底是“用户反馈”还是“售后政策”。

• 别用 ID 命名代替语义：优先写 <section id="faq"><h2>常见问题</h2>，而不是 <section id="section-3">
• 嵌套深度控制在 2 层内：<section> > <section> 可以，再往里就该质疑结构是否合理
• 如果某块内容连标题都想不出名字，别硬凑——直接换 <div>，诚实比“看起来语义化”重要得多