section 必须配 h2～h6 标题，否则语义断裂、可访问性受损；判断用 section 还是 div 的唯一标准是内容能否独立成文；避免滥用、错嵌、无标题或替代更具体语义标签。

section 不是“视觉分块工具”，它只在内容能独立成文、有明确主题、需要出现在文档大纲里时才该用。

什么时候必须配 h2～h6？

没有标题的 section 在语义上是断裂的：屏幕阅读器无法识别主题，Lighthouse 会报 Section lacks heading 错误，浏览器文档大纲里显示为空节点。

• 标题不一定要视觉可见，但必须存在 —— <h3 class="visually-hidden">技术参数</h3> 是合法且常见做法
• 嵌套时层级必须合理：父 section 用 h2，子节用 h3，不能跳级或倒置
• 多个同级 section 应逻辑并列（如「部署步骤」「性能对比」「用户反馈」），不是父子控制关系

section 和 div 的边界在哪？

判断依据只有一个：这段内容抽出来，还能不能被人独立理解？能——用 section；不能——用 div。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• 轮播图的左右箭头容器、页脚里的社交媒体图标列表、仅为了加 margin 的几个 p → 这些都该用 div
• <section><button>提交</button><p>请确认信息</p></section> 是典型误用：没标题、无主题、纯交互容器
• 已有更具体语义标签时，别退化成 section：导航用 nav，正文用 article，侧边栏用 aside

为什么整个 main 只包一个 section 是错的？

这种写法削弱了分区意义，等于把整篇文档压缩成一个“章节”，文档大纲只剩一层，可访问性和 SEO 都受损。

• 真实结构应按内容主题拆解：比如产品页可分 <section><h2>核心功能</h2>...</section>、<section><h2>用户评价</h2>...</section>
• IE8 及更早版本不识别 section，若真要兼容，必须引入 HTML5 Shiv + 手动重置样式，否则 JS 查不到、CSS 不继承
• article 和 section 不是替代关系：一篇文章可包含多个 section，但一个 section 通常不属于独立可分发的内容

真正难的不是怎么写 section，而是写之前先问自己：这段内容有没有资格出现在文档大纲里？如果连主题名都说不出，那就别用。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！