HTML中section与div区别 HTML中section标签语义化解析

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

<section> 不是“带样式的 <div>”，它不负责布局，也不提供默认视觉效果；它的存在只服务于一个目的：告诉浏览器、搜索引擎和屏幕阅读器——“这里是一块有独立主题、能被单独命名和导航的内容区域”。

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

判断依据只有一个：这块内容是否天然带有可命名的主题，并出现在文档大纲中。

• 产品页里的「核心功能」「客户案例」「技术参数」——每个都该是 <section>，因为它们各自有 <h2> 标题，且可被单独链接或摘要
• 首页上并列的三篇最新文章——每篇都该是 <article>，不是 <section>；整个“最新文章”容器才是 <section>
• 页脚里的社交媒体图标列表、导航栏下拉菜单、表单里的分组字段——这些只是布局/交互单元，用 <div> + class 更准确
• 如果你给某块内容加了 <section> 却一时想不出标题，大概率说明它不该是 <section>

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

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

• 错误写法：<section><p>这部分讲性能优化</p></section> —— 没标题，语义失效
• 正确写法：<section><h3>性能优化策略</h3><p>这部分讲性能优化</p></section>
• 嵌套时，子 <section> 也需有自己的标题，且层级应与标题级别匹配（比如父级用 <h2>，子级用 <h3>）
• 标题不必非得是文字，<h3><span aria-hidden="true">⚙️</span><span class="visually-hidden">配置说明</span></h3> 也算有效标题

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

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

立即学习“前端免费学习笔记（深入）”；

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

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