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