必须且只能有一个，是页面唯一主内容语义锚点，须直接位于下、不得嵌套于等元素内，否则破坏屏幕阅读器跳转与seo；其内容须为当前url独有、不可复用的核心信息。

能，但前提是正确使用——误用或堆砌反而会让屏幕阅读器更困惑、让搜索引擎更难判断主次。

为什么 <header></header> 和 <nav></nav> 不是“换个写法就变高级”

这两个标签本身不改变视觉样式，但会向辅助技术传递明确意图：<header></header> 表示页面或区段的头部，<nav></nav> 表示导航链接集合。如果把整个顶部栏（含搜索框、登录入口、广告横幅）全塞进一个 <nav></nav>，屏幕阅读器就会错误地认为“所有这些都可跳转”，用户得逐个听过去才能确认哪些是链接、哪些不是。

Article To Html

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

下载

• 只把真正用于站点导航的 <a></a> 集合包进 <nav></nav>，登录/搜索等操作控件应放在 <header></header> 内但独立于 <nav></nav>
• <header></header> 可以出现多次（比如每个 <article></article> 里也能有），但一个页面通常只有一个顶级 <header></header> 对应整个页面头部
• 浏览器原生支持 document.querySelector('nav')，比靠 class 名定位更稳定；但若滥用，JS 逻辑可能意外命中错误区域

<main></main> 必须且只能有一个，否则会破坏可访问性流

WCAG 明确要求每个页面有且仅有一个 <main></main>，它是屏幕阅读器“跳转到主要内容”的唯一锚点。如果页面里写了两个 <main></main>，部分读屏软件会忽略第二个，或者直接报错中断导航流程。

• 不要在弹窗、侧边栏、卡片组件里擅自加 <main></main> ——它们不属于页面主体内容
• <main></main> 应直接包裹核心信息流（如文章正文、商品列表、表单主体），不包含页头页脚、广告位、相关推荐等周边内容
• 若页面是 SPA，路由切换时需动态更新 <main></main> 的 aria-live 或触发 focus()，否则读屏用户可能卡在旧内容上

<section></section> 和 <div> 的边界在哪 <p>关键看有没有独立标题：<code><section></section> 必须能被 <h2></h2>–<h6></h6> 合理概括，否则就是 <div>。比如“用户评论区”配了 <code><h2>网友评论</h2>，就该用 <section></section>；而“加载中动画容器”没有语义标题，必须用 <div>。 <ul> <li>嵌套层级过深（如 <code><section><section><section></section></section></section>）会让结构树膨胀，影响读屏顺序和 SEO 权重分配

搜索引擎会把 <section></section> 内的 <h2></h2> 当作该区块主题词，若乱用，可能稀释主标题关键词权重

CSS 中 section + section 这类相邻选择器比 .block + .block 更可靠，但前提是 DOM 结构真实反映内容关系

最容易被忽略的是：语义化不是贴标签，而是建结构。一个 <article></article> 套着五个 <section></section> 却没有标题，比一个干净的 <div> 更损害体验。</div>