应使用而非当内容围绕同一主题、逻辑上可独立成章且自带标题时；若仅为视觉分隔或无语义分组，则应用。

什么时候该用 <section></section> 而不是 <div> <p>当你有一组内容围绕同一主题、且逻辑上可独立成章时，<code><section></section> 就是正确选择。比如“产品功能介绍”“用户评价汇总”“技术参数对比”，每个都该有自己的 <h2></h2>～<h6></h6>，删掉这个标签后，别人就分不清哪块讲的是什么——那就该换。

常见错误现象：<div class="section-about"></div> 套着 <h2></h2>，但没语义；或者把纯样式分隔（比如加个 margin-top）也硬套 <section></section>，结果被屏幕阅读器读作“新章节”，干扰导航。

• <section></section> 必须自带标题（<h2></h2> 或更高级别），否则语义不成立
• 不要嵌套太多层：<section><section><section></section></section></section> 容易让辅助技术迷失层级
• 如果内容只是视觉分组、无独立主题，用 <div> + class 更合适 <h3> <code><article></article> 和 <section></section> 的核心区别在哪

<article></article> 强调“可独立分发、复用”，比如一篇博客、一条新闻、一个评论卡片；<section></section> 只是“页面内逻辑区块”，依赖上下文存在。两者不能互换——把整页的“关于我们”塞进 <article></article>，搜索引擎会误判为可单独 RSS 订阅的内容。

典型场景：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 博客列表页：每个 <article></article> 包含标题、作者、正文、发布时间
• 单篇博客页：整个内容用一个 <article></article>，内部再用 <section></section> 划分“背景”“方法”“结论”
• 侧边栏的“热门文章推荐”列表，每条仍是 <article></article>，因为每篇都可独立存在

为什么 <nav></nav> 不能只放顶部菜单

<nav></nav> 的语义是“导航链接集合”，不绑定位置。页脚里的“隐私政策｜服务条款｜联系我们”、文章末尾的“上一篇｜下一篇”，只要是一组用于跳转的链接，就该包在 <nav></nav> 里——否则屏幕阅读器无法识别这是导航区，用户按快捷键跳转时会漏掉。

容易踩的坑：

• 把搜索框、登录按钮、筛选控件塞进 <nav></nav>：它们不是导航链接，应放在 <header></header> 或 <aside></aside> 中
• 多个 <nav></nav> 没加 aria-label 或 <h2></h2>：屏幕阅读器无法区分“主导航”和“页脚导航”，建议写 <nav aria-label="页脚导航"></nav>
• 用 <div class="nav"> 替代：浏览器和辅助工具完全忽略其导航意图 <h3>哪些情况还必须用 <code><div> <p>不是所有容器都要语义化。<code><div> 合理存在的前提是：删掉它，内容的角色和关系依然清晰可辨。 <p>真实可用的场景：</p> <ul><li>CSS Grid/Flex 容器内部需要额外包裹一层控制对齐或间距，比如 <code><div class="card__body"> <li>Vue/React 组件返回 JSX 时，根节点需唯一，而语义标签可能破坏父级结构（如组件本该渲染为 <code><article></article> 子内容，但父组件强制要求 wrapper）
• 需要 display: contents 或重置默认样式，而 <section></section> 等自带隐式 ARIA role 或 margin，反而干扰布局

关键判断标准：你加这个标签，是为了表达内容意义，还是仅仅为了 CSS 或 JS 操作？前者选语义标签，后者选 <div>。</div>