section必须配标题否则语义失效，标题可隐藏但需存在且层级递进；能独立命名、入大纲、被引用的内容才适用section，否则用div更准确。
section标签必须配～标题，否则语义失效
标题，否则语义失效
没标题的 <section></section> 在屏幕阅读器里不可见，Lighthouse 会报 “section element does not have a title”，浏览器大纲视图显示为空节点——它和 <div> 没区别，只是多敲了几个字符。
<ul>
<li>标题不一定要视觉可见：<code><h3 class="visually-hidden">技术参数</h3> 合法且常用
<h1></h1>：页面应只有一个 <h1></h1>，<section></section> 内部从 <h2></h2> 起始<section></section> 用 <h2></h2>，子节必须用 <h3></h3>，跳级（如 <h2></h2> → <h5></h5>）或平级（全用 <h2></h2>）都会破坏大纲层级<section></section> —— 换成 <div> 更诚实
<h3>什么时候该用<section>而不是<div>
<p>核心就看这块内容能不能被单独叫出名字、放进文档大纲、或被人引用时说“看第三 <code><section></section> 的性能对比”。
- 能起名、有上下文意义、可被单独引用 → 用
<section></section>，比如「部署步骤」「用户反馈」「技术参数」 - 只为加
margin/ 触发动画 / 给 JS 选中 → 用<div class="modal-trigger"> <li>轮播图外层、导航栏、页脚图标列表 → 已有 <code><nav></nav>、<footer></footer>或纯布局需求，<div> 更准确 <li>整页只包一个 <code><section></section>→ 削弱分区意义，不如按真实逻辑拆成多个 -
<article></article>：内容可独立分发、重用、RSS 抓取，比如一篇博客、一条新闻、一个评论；它内部可以有多个<section></section> -
<section></section>：强调主题组织，比如文章里的「方法论」「实验结果」，仪表盘里的「活跃趋势」「订单统计」 <div>：无语义，纯为样式、JS 钩子或临时分组，比如 <code><div class="carousel-controls"></div>- 已有更具体语义标签时别退化：导航用
<nav></nav>，侧边栏用<aside></aside>，主内容区用<main></main>，别再外层硬套<section></section> - 同级多个
<section></section>必须逻辑并列：比如「背景」「实现」「测试」，而不是「导航」「页脚」这种非主题块 - 嵌套不宜超过两层：
<section></section>套<section></section>套<section></section>容易让大纲混乱，辅助技术难以建立层级 -
<section></section>里一般不该再套<article></article>，除非是“相关文章推荐”这类明确的独立内容集合 - 服务端渲染时动态插入
<section></section>但漏掉标题，会导致无障碍树断裂，比不用还糟
section和、的分工边界在哪
它们不是替代关系，是语义分工：谁该承载什么信息，由内容本身决定。
嵌套和同级使用时最容易忽略的结构问题
结构失焦往往不是写错了标签，而是没想清楚内容关系。
真正难的不是怎么写 <section></section>，而是写之前先确认：这段内容有没有资格出现在文档大纲里？如果连自己都说不出它的主题名，那就别用。
的分工边界在哪
它们不是替代关系，是语义分工：谁该承载什么信息，由内容本身决定。
嵌套和同级使用时最容易忽略的结构问题
结构失焦往往不是写错了标签，而是没想清楚内容关系。
<section></section>，而是写之前先确认：这段内容有没有资格出现在文档大纲里？如果连自己都说不出它的主题名，那就别用。
