HTML中无“综合元素”概念，实际指通用容器选用原则：无语义时用<div>，否则优先语义标签；<article>强调独立可分发，<section>侧重主题分组；误用会损害无障碍与可维护性。
HTML 里没有叫“综合元素”的标准概念——这是个误导性标题，实际想问的通常是 <div>、<span>、<section>、<article> 这类通用容器怎么选、怎么用、为什么乱用会出问题。
什么时候该用 <div> 而不是语义化标签
当内容本身没有明确语义（比如纯布局占位、动画包裹层、JS 操作钩子），且不需要被屏幕阅读器或搜索引擎识别为特定结构时，<div> 才是合理选择。
- 常见错误现象：
<div class="header">替代<header>，导致无障碍工具无法正确解析页面结构 - 使用场景：CSS Grid/Flex 布局的 wrapper、Vue/React 组件根节点（无语义需求时）、第三方 SDK 插入点
- 性能影响：语义标签本身无性能开销，但滥用
<div>会让 HTML 体积略增、可维护性下降 - 兼容性：所有浏览器都支持
<div>，但语义标签如<main>在 IE9 及以下不被识别（仅影响样式和 ARIA，不影响渲染）
<section> 和 <article> 别混着用
二者核心区别不在“内容长短”，而在“独立性”：<article> 必须能脱离当前页面被单独分发（比如 RSS 条目、博客正文）；<section> 是主题性分组，依赖上下文存在。
- 常见错误现象：把导航栏、页脚塞进
<section>，或把整篇新闻稿包在<section>里却不用<article> - 参数差异：无属性差异，但
<article>内部可嵌套<header>/<footer>表示其自身元数据，<section>不鼓励这样用 - 使用场景：
<article>适合博客文章、用户评论、产品卡片；<section>适合“关于我们”“服务流程”这类逻辑区块
别为了“语义”硬套 <aside> 或 <figure>
<aside> 不等于“侧边栏”，而是与主内容关联较弱的补充信息（如术语解释、引用来源）；<figure> 不单指图片，而是任何被当作一个整体引用的内容单元（含图表、代码块、引文）。
立即学习“前端免费学习笔记（深入）”；
- 常见错误现象：
<aside>里放广告位或登录框（它们既不补充主内容，也不脱离主内容有意义） - 容易踩的坑：
<figure>必须配<figcaption>才算完整语义，否则不如用普通<div> - 性能 / 兼容性：这些标签对渲染无影响，但误用会导致辅助技术误读。例如屏幕阅读器遇到
<aside>会提示“旁注”，若里面是广告，用户会被干扰 - 简短示例：
<figure> <pre><code>console.log("hello");</code></pre> <figcaption>调试输出示例</figcaption> </figure>
真正难的不是记住每个标签的定义，而是每次写 HTML 时多问一句：“这个容器如果去掉所有样式，还剩什么意义？”——答案决定了你该用 <div> 还是某个语义标签。很多人卡在这一步，不是不会写，是没停下来判断。
