<section>标签应仅用于有独立主题、可命名和出现在文档大纲中的语义区块，必须配合<h2>–<h6>标题使用，否则语义失效；它不同于<div>（仅布局）和<article>（可独立分发的内容单元）。
HTML 中的 <section> 标签不是“随便包一块内容”的容器，它代表一个有独立主题、可被单独引用或导航的语义区块。
什么时候该用 <section> 而不是 <div>
核心判断标准：这块内容能否被单独命名、摘要、跳转或出现在文档大纲中。比如一篇博客里「引言」「技术原理」「代码示例」「性能对比」各自是一个 <section>；但页脚里的社交媒体图标列表、导航栏里的下拉菜单，通常只是布局或交互单元，用 <div> 更合适。
常见错误现象：<section> 套 <section> 却没有嵌套的标题（<h2>–<h6>），导致屏幕阅读器无法建立层级关系；或者把整个页面主体全塞进一个 <section>，反而削弱了语义。
- 必须配合标题元素（
<h2>–<h6>）使用，否则语义断裂 - 同一级
<section>应有逻辑并列关系，不是父子控制关系 - 如果只是为了样式或 JS 选中，优先用
<div>+class，别滥用<section>
<section> 和 <article> 的边界在哪
<article> 是可独立分发、重用的内容单元（比如一篇博文、一条新闻、一个用户评论）；<section> 是为组织内容服务的语义分组，依赖上下文存在。一个 <article> 内部可以有多个 <section>，但反过来不成立。
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
使用场景举例：产品介绍页里，“核心功能”“客户案例”“技术参数”是三个并列 <section>；而其中“客户案例”区块里每条客户反馈，才各自是 <article>。
-
<section>不要求能脱离当前页面被 RSS 抓取或单独链接 -
<article>必须自带完整上下文（如作者、发布时间），<section>不需要 - 浏览器自动生成的文档大纲（如通过开发者工具查看）会把
<section>当作一个可折叠节点，前提是它有标题
不加标题的 <section> 会怎样
它在语义上失效——HTML5 规范明确指出：<section> 应“通常”有标题，没有标题时，需确认它是否真的不可命名。实际影响包括：
- 辅助技术（如读屏软件）可能忽略该区块，或将其降级为普通
<div> - 搜索引擎可能弱化其内容权重，尤其当页面缺乏清晰结构时
- 自动提取大纲工具（如某些 CMS 或 SEO 插件）无法识别该区块意图
- 开发者协作时，别人很难快速理解这个
<section>承载什么职责
如果你真找不到合适标题，大概率说明它不该是 <section> ——考虑用 <div>、<aside> 或直接移除标签。
兼容性和渲染风险提醒
<section> 是 HTML5 标签，IE8 及更早版本不识别，但可通过 document.createElement('section') 或引入 html5shiv 补丁解决。不过真正容易被忽略的是 CSS 重置问题：
- 部分旧版 CSS 重置库（如早期 Normalize.css）未给
<section>设默认 margin，导致相邻区块贴得太近 - 若全局用
section { display: block; }，在极少数定制内核浏览器中可能触发未知渲染 bug（虽罕见，但企业级项目需留意） - 服务端渲染（SSR）框架若未正确声明 DOCTYPE，可能退化为 quirks mode，使
<section>行为异常
最稳妥的做法：始终声明 <!DOCTYPE html>，用现代 CSS 重置（如 modern-normalize），并避免对 <section> 做全局 display 覆盖。
