必须用仅当内容有可命名主题且出现在文档大纲中；它必须含–标题，否则损害可访问性与SEO；无标题的语义断裂，应改用。
<section></section> 不是带样式的 <div>，它只在内容天然有独立主题、能被命名并出现在文档大纲里时才该用；没标题的 <code><section></section> 语义断裂，反而干扰 SEO 和可访问性。
什么时候必须用 <section></section> 而不是 <div>
<p>判断依据只有一个：这块内容是否自带可命名的主题，且会出现在浏览器“文档结构”视图或读屏软件的大纲导航中。</p>
<ul>
<li>产品页里的「核心功能」「客户案例」「技术参数」——每个都该是 <code><section></section>，因为它们各自有 <h2></h2> 标题，且可被单独链接或摘要
<article></article>，整个“最新文章”容器才是 <section></section>
<div> + <code>class 更准确
<section></section> 却一时想不出标题，大概率说明它不该是 <section></section>
<section></section> 必须配 <h2></h2>–<h6></h6> 吗？
是的。W3C 明确建议每个 <section></section> 应含标题元素；没有标题的 <section></section> 在辅助技术中基本等于隐身。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- NVDA / VoiceOver 不会把它列为导航节点
- 自动大纲提取工具无法识别该区域的语义边界
- Google Lighthouse 会报 “
<section></section>缺少标题”，直接拉低“可访问性”评分 - CSS 选择器如
section h3失效——因为结构锚点（标题）不存在
为什么用 <div> 反而更“安全”？<p>在 JS 操作和样式隔离场景下，<code><div> 的无语义性是优势，而非缺陷。<ul>
<li>
<code>document.querySelector('.sidebar') 不会意外匹配到语义化标签（比如误抓 <section class="sidebar"></section>），避免重构时 DOM 查询漂移
<section></section>，会导致屏幕阅读器报“空章节”<section></section> 是典型误用——它更适合 <footer></footer>
<div role="region" aria-labelledby="xxx"> 能模拟语义，但不如原生 <code><section></section> 简洁可靠
真正难的不是记住规则，而是每次写标签前停半秒：这段内容，有没有一个自然浮现的标题？如果没有，就别碰 <section></section> —— 它不负责布局，也不提供默认样式，只负责说清“这是什么”。
