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

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

什么时候必须用 <section></section> 而不是 <div> <p>判断只看一条：这块内容能不能被 RSS 抓取、被别人单独链接分享、或出现在浏览器自动生成的大纲里（按 F6 或用 <a href="https://www.php.cn/link/23a3794cc2565540c411bbef0ab1361b">HTML5 Outliner</a> 验证）？能，就该是 <code><section></section> 或 <article></article>；不能，就老实用 <div>。 <ul> <li>✅ 适合 <code><section></section>：产品页里的「核心功能」「客户案例」「技术参数」——每项有明确主题，且彼此并列

❌ 不适合 <section></section>：导航栏里的下拉菜单、卡片网格容器、加载中的旋转图标——它们只是布局/交互单元，无独立语义

⚠️ 危险信号：你给 <section></section> 加了 class="feature-card" 却没配 <h2></h2>，说明它大概率不该是 <section></section>

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

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

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

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

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

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

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

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

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