必须配标题，否则语义断裂；它仅用于有独立主题、可命名并出现在文档大纲中的内容区域，如“核心功能”“客户案例”，且嵌套时子section也需匹配层级的标题。

<section></section> 不是“带样式的 <div>”，它不负责布局，也不提供默认视觉效果；它的存在只服务于一个目的：告诉浏览器、搜索引擎和屏幕阅读器——“这里是一块有独立主题、能被单独命名和导航的内容区域”。 <h3>什么时候必须用 <code><section></section> 而不是 <div> <p>判断依据只有一个：这块内容是否天然带有可命名的主题，并出现在文档大纲中。</p> <ul> <li>产品页里的「核心功能」「客户案例」「技术参数」——每个都该是 <code><section></section>，因为它们各自有 <h2></h2> 标题，且可被单独链接或摘要

首页上并列的三篇最新文章——每篇都该是 <article></article>，不是 <section></section>；整个“最新文章”容器才是 <section></section>

页脚里的社交媒体图标列表、导航栏下拉菜单、表单里的分组字段——这些只是布局/交互单元，用 <div> + <code>class 更准确

如果你给某块内容加了 <section></section> 却一时想不出标题，大概率说明它不该是 <section></section>

<section></section> 必须配标题，否则语义断裂

没有 <h2></h2>–<h6></h6> 的 <section></section> 在辅助技术中基本等于隐身：NVDA 和 VoiceOver 不会把它列为导航节点，自动大纲提取工具无法识别，CSS 作用域也失去结构锚点。

• 错误写法：<section><p>这部分讲性能优化</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5493" title="html-to-pptx"><img src="https://img.php.cn/upload/skill/000/000/081/179051045119472.jpg" alt="html-to-pptx" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill5493" title="html-to-pptx" class="overflowclass">html-to-pptx</a> <p class="overflowclass">将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。</p> </div> <a rel="nofollow" href="/xiazai/skill5493" title="html-to-pptx" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div></section> —— 没标题，语义失效
• 正确写法：<section><h3>性能优化策略</h3> <p>这部分讲性能优化</p></section>
• 嵌套时，子 <section></section> 也需有自己的标题，且层级应与标题级别匹配（比如父级用 <h2></h2>，子级用 <h3></h3>）
• 标题不必非得是文字，<h3> <span aria-hidden="true">⚙️</span><span class="visually-hidden">配置说明</span> </h3> 也算有效标题

<section></section> 和 <article></article> 的边界在哪

<article></article> 是“可独立分发、重用”的内容单元（如一篇博文、一条评论、一则新闻），<section></section> 是为组织内容服务的语义分组，依赖上下文存在。

• 博客正文里，“引言”“原理分析”“代码示例”“总结”是四个并列 <section></section>，都嵌套在同一个 <article></article> 内
• 但每条评论本身是 <article></article>，不是 <section></section>；评论区容器才是 <section></section>
• 滥用 <section></section> 替代 <article></article> 会让 RSS 抓取失败、分享卡片丢失元数据
• 已有专用语义标签的区域（如 <nav></nav>、<aside></aside>、<footer></footer>）别再套 <section></section>

最容易被忽略的其实是标题缺失带来的连锁反应：它不仅让屏幕阅读器跳过整块内容，还会导致 CSS 中基于结构的选择器（比如 section h2 + p）失效，甚至影响 document.querySelectorAll('section') 返回结果的语义可信度。别为了“看起来更语义化”而加 <section></section>，先问一句：这块内容，用户能靠标题直接跳到它吗？