<section>必须配<h2>–<h6>标题才具语义，否则等同<div>；其用途是标识可命名、入大纲、支持锚点跳转的主题内容区块，与<div>（仅样式/交互）、<article>（可独立分发）、<main>（唯一主内容区）语义分工明确。
<section> 不是用来“划分模块”的视觉容器，它只在内容有明确主题、能起标题、可被大纲识别时才该用；没 <h2>–<h6> 的 <section> 语义上等于 <div>，只是多打了几个字符。
什么时候必须配 <h2>–<h6> 才能用 <section>
浏览器和屏幕阅读器把 <section> 当作一个可跳转的“章节”，没标题就等于告诉它们：“这里有个空节”。Lighthouse 会报 section-has-heading 错误，文档大纲工具（如 HTML5 Outliner）直接忽略它。
- 标题必须是真实的
<h2>–<h6>元素，不能是<p class="title">或<div role="heading"> - 标题不一定要视觉可见，可用
<h3 class="visually-hidden">客户案例</h3>保留语义 - 同级
<section>的标题层级要一致（比如全是<h2>），嵌套时需递进（父<h2>→ 子<h3>） -
<h1>应唯一且留给页面主标题，<section>起手推荐用<h2>
<section> 和 <div>、<article>、<main> 怎么选
四者不是层级替代关系，而是语义分工不同：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 用
<div>：只为加样式、触发动画、绑定 JS 事件——比如轮播箭头容器、表单操作按钮组、纯 padding 包装层 - 用
<section>：内容能被命名、进大纲、锚点跳转——比如<h2>核心功能</h2>、<h3>部署步骤</h3> - 用
<article>：内容可独立分发、RSS 抓取、单独分享——比如博客正文、新闻条目、用户评论 - 用
<main>：页面唯一主内容区，应直接包裹<article>或多个并列<section>，不能嵌套在<section>或<article>里
常见误用现象与修正建议
这些写法看着省事，实际污染语义结构，后期维护和无障碍访问都会出问题：
-
<section><button>提交</button><p>请确认信息</p></section>→ 没标题、无主题，改用<div class="form-actions"> -
<section><nav>...</nav></section>→<nav>已有明确语义，再包一层<section>是冗余 - 整个
<main>只包一个<section>→ 削弱分区意义，应按真实主题拆成多个并列<section> -
<section id="block-7"></section>→ 没标题、没内容、仅靠 ID 命名，三个月后你自己都猜不出这节干啥
真正难的不是怎么写 <section>，而是写之前先问一句：这段内容有没有资格出现在文档大纲里？如果连自己都说不出它的主题名，那就别用。
