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