用、、、、、、七个语义标签可覆盖95%常规页面结构；需有标题且能独立概括内容，须可独立分发，全页唯一且不可嵌套，纯样式容器才用。

直接说结论：用 <header></header>、<nav></nav>、<main></main>、<article></article>、<section></section>、<aside></aside>、<footer></footer> 这七个标签，就能覆盖 95% 的常规页面结构需求；剩下的不是非得用 <div>，而是你还没想清楚语义边界。 <h3>什么时候该用 <code><section></section> 而不是 <div> <p><code><section></section> 不是「视觉区块」的代名词，它是有明确语义边界的——必须能配上一个 <h2></h2>～<h6></h6> 标题，且该标题能准确概括其内部全部内容。比如产品介绍区、用户评价区、FAQ 区都天然适合 <section></section>；但一个纯用来控制 Flex 布局对齐的容器，就不该硬套 <section></section>。

• 常见错误：把轮播图外层、卡片网格容器、表单分组框全写成 <section></section>，结果生成一堆无意义的文档大纲节点
• 判断口诀：删掉这个标签后，页面大纲（浏览器开发者工具里的「Accessibility → Landmarks」或「Outline」视图）是否断裂？如果没影响，大概率不该用
• 兼容性注意：<section></section> 在 IE9+ 完全支持，但旧版屏幕阅读器对嵌套过深的 <section></section> 解析不稳定，建议最多嵌套两层

<article></article> 和 <section></section> 的核心区别在哪

<article></article> 是可独立分发、可复用的内容单元，比如一篇博客、一条新闻、一个用户评论；<section></section> 是页面内逻辑分组，依赖上下文存在。两者都能嵌套标题，但语义权重不同：搜索引擎和 RSS 阅读器会单独抓取 <article></article> 内容，而忽略 <section></section>。

Article To Html

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

下载

• 典型误用：把「关于我们」板块写成 <article></article>——它不独立，不能脱离当前网站存在
• 正确场景：博客列表页中每个 <article></article> 可以被单独分享到社交平台，或被聚合进 RSS feed
• 性能提示：过度使用 <article></article> 会让辅助技术反复播报「文章开始/结束」，干扰视障用户浏览节奏

为什么 <main></main> 不能嵌套，且全页只能有一个

<main></main> 表示页面唯一的核心内容区域，是无障碍访问的关键地标（landmark）。浏览器和屏幕阅读器靠它快速跳转到主体，如果嵌套或重复，等于告诉辅助工具「这里有两个主内容」，直接导致导航失效。

• 常见错误：在 <article></article> 或 <section></section> 内再包一层 <main></main>；或者在 SPA 中每个路由组件都渲染一个 <main></main>
• 实操建议：SPA 应由根组件统一包裹 <main></main>，子组件只用 <section></section> 或 <article></article>；服务端渲染页确保 HTML 中仅出现一次 <main></main>
• 验证方式：运行 Lighthouse 的「Accessibility」审计，若报 Document does not have a main landmark 或 Multiple main landmarks，立刻修正

哪些地方真的绕不开 <div>，但可以少用 <p>不是所有容器都需要语义——纯样式隔离、JS 挂载点、CSS Grid/Flex 子项包装，这些仍是 <code><div> 的合法领地。关键在于：别让它承担语义职责。 <ul><li>安全用法：按钮组容器 <code><div class="btn-group">、React 组件根节点 <code><div ref="{containerRef}">、动画包裹层 <code><div class="fade-enter-active"> <li>危险信号：看到 <code><div class="header"> 或 <code><div id="sidebar"> 就该警觉——这说明语义被降级到了 class 层 <li>替代思路：用 <code><header></header> + role="banner"（冗余但兼容旧读屏器），或直接用 <aside></aside> 替代 <div id="sidebar"> <p>真正难的不是记住标签名，而是每次写结构前多问一句：这个区块如果剥离样式和 JS，它在纯文本大纲里该叫什么名字？答案如果是「顶部区域」「右边那块」，就还没找到语义锚点。</p> </div>