应仅在内容可命名、能纳入文档大纲时用<section>，且必须配<h2>～<h6>标题；否则用<div>或更具体语义标签。无标题<section>丧失语义价值，嵌套不宜超两层。
没标题的 <section> 就是语义废标签，跟 <div> 没区别，还多占字符。
怎么判断该不该用 <section> 而不是 <div>
核心就看这块内容能不能被单独叫出名字、放进文档大纲、或被人引用时说“看第三 section 的性能对比”。
- 能起名：比如「部署步骤」「用户反馈」「技术参数」→ 适合
<section> - 只为加 margin / 触发动画 / JS 选中 → 诚实点，用
<div class="card"> - 套着轮播图、导航栏、页脚图标列表 → 这些已有
<nav>、<footer>或纯布局需求，<div>更准确 - 整页只包一个
<section>→ 削弱分区意义，不如按真实逻辑拆成多个
为什么必须配 <h2>～<h6>？
没有标题的 <section> 在屏幕阅读器里不可见，在 Lighthouse 里报错，在浏览器大纲视图里显示为空节点——它失去了作为“节”的全部语义价值。
- 标题不一定要视觉可见：
<h3 class="visually-hidden">技术参数</h3>合法且常用 - 不能只用
<h1>：页面应只有一个<h1>，<section>内推荐从<h2>起始 - 嵌套时标题层级必须递进：父
<section>用<h2>，子节用<h3>，不能全用<h2>或跳级
<section> 和 <article>、<div> 怎么分工？
它们不是替代关系，是语义分工：谁该承载什么信息，由内容本身决定。
立即学习“前端免费学习笔记（深入）”；
-
<article>：内容可独立分发、重用、RSS 抓取，比如一篇博客、一条新闻、一个评论 → 它内部可以有多个<section> -
<section>：强调主题组织，比如文章里的「方法论」「实验结果」，仪表盘里的「活跃趋势」「订单统计」 -
<div>：无语义，纯为样式、JS 钩子或临时分组，比如<div class="carousel-controls"> - 已有更具体语义标签时别退化：导航用
<nav>，侧边栏用<aside>，主内容区用<main>，别再外层硬套<section>
嵌套和同级使用时容易踩的坑
结构失焦往往不是写错了标签，而是没想清楚内容关系。
- 同级多个
<section>必须逻辑并列：比如「背景」「实现」「测试」，而不是「导航」「页脚」这种非主题块 - 嵌套不宜超过两层：
<section>套<section>套<section>很快让大纲混乱，优先考虑是否该用<article>或重构主题粒度 -
<section>里不要包<nav>或<footer>：这些标签自身已有完整语义，再包一层反而干扰解析 - IE8 兼容不是理由：真要支持就得上 HTML5 Shiv + 重置样式，但更现实的做法是放弃 IE8，别让语义迁就过时环境
真正难的不是怎么写 <section>，是写之前敢不敢问自己一句：这段内容，有没有资格出现在文档大纲里？如果连主题名都说不出，那就别用。
