<section>必须有且仅有一个h2–h6标题，否则语义失效、屏幕阅读器跳过、SEO受损；它用于可独立引用的逻辑章节，非交互容器；与<article>是协作而非嵌套关系。
<section> 不是“包内容的盒子”，而是“能起标题、能跳转、能被别人单独引用”的功能节。没标题的 <section>，等于白写。
为什么没标题的 <section> 会失效
浏览器不报错，但语义链断了：屏幕阅读器跳过它，HTML5 Outliner 工具直接忽略，SEO 权重被稀释。你三个月后回看 <section id="block-3">，根本猜不出它是“售后政策”还是“用户协议”。
- 规范明确要求：
<section>“通常应有标题”，实际项目中必须有且仅有一个<h2>–<h6> -
<h1>只能用于整个页面主标题（在<main>外），<section>内部严禁用<h1> - 同级
<section>的标题级别必须一致（比如全是<h2>），否则大纲结构错乱，F6 导航会跳飞
哪些场景必须用 <section> 而不是 <div>
判断标准只有一条：这块内容能不能被 RSS 抓取、被别人单独链接分享、或出现在浏览器自动生成的大纲里？能，就该是 <section>；不能，就老实用 <div>。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- ✅ 正确：
<section>包裹「核心功能」「客户案例」「技术参数」——每项有明确主题，彼此并列，可独立理解 - ❌ 错误：
<section class="carousel-controls">包轮播按钮——这只是交互容器，无主题、不可分发 - ⚠️ 危险信号：你给
<section>加了class="feature-card"却没配<h2>，说明它大概率不该是<section>
<section> 和 <article> 到底谁套谁
它们不是父子替代关系，是协作关系：<article> 是可独立存在、可分发的内容单元（如一篇博客）；<section> 是为组织服务的逻辑分组（如这篇博客里的「背景」「实现」「测试」）。
- ✅ 正确：
<article>内嵌多个<section>，每个带<h3> - ✅ 正确：
<main>下并列多个<section>（如 FAQ 分组、使用指南、API 文档） - ❌ 错误：把整页主内容塞进一个
<section>—— 这反而模糊了结构层级 - ❌ 错误：在
<section>里硬塞 5 张卡片却不加<ol>/<ul>—— 缺少列表语义，辅助技术无法识别集合关系
IE8 兼容和维护上最易忽略的一点
IE8 不识别 <section>，但渲染不受影响——真正麻烦的是人。语义标签不是“越多越好”，而是“刚好够用”。一个没有标题、不构成逻辑章节、也不打算被外部引用的内容块，就老实用 <div>。它的存在本身，就是一种诚实的设计选择。
