<main>必须且只能有一个，是页面唯一主内容语义锚点，须直接位于<body>下、不得嵌套于<header>等元素内，否则破坏屏幕阅读器跳转与SEO；其内容须为当前URL独有、不可复用的核心信息。
能，但前提是正确使用——误用或堆砌反而会让屏幕阅读器更困惑、让搜索引擎更难判断主次。
为什么 <header> 和 <nav> 不是“换个写法就变高级”
这两个标签本身不改变视觉样式，但会向辅助技术传递明确意图：<header> 表示页面或区段的头部，<nav> 表示导航链接集合。如果把整个顶部栏（含搜索框、登录入口、广告横幅）全塞进一个 <nav>，屏幕阅读器就会错误地认为“所有这些都可跳转”，用户得逐个听过去才能确认哪些是链接、哪些不是。
- 只把真正用于站点导航的
<a>集合包进<nav>，登录/搜索等操作控件应放在<header>内但独立于<nav> -
<header>可以出现多次（比如每个<article>里也能有），但一个页面通常只有一个顶级<header>对应整个页面头部 - 浏览器原生支持
document.querySelector('nav')，比靠 class 名定位更稳定；但若滥用，JS 逻辑可能意外命中错误区域
<main> 必须且只能有一个，否则会破坏可访问性流
WCAG 明确要求每个页面有且仅有一个 <main>，它是屏幕阅读器“跳转到主要内容”的唯一锚点。如果页面里写了两个 <main>，部分读屏软件会忽略第二个，或者直接报错中断导航流程。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 不要在弹窗、侧边栏、卡片组件里擅自加
<main>——它们不属于页面主体内容 -
<main>应直接包裹核心信息流（如文章正文、商品列表、表单主体），不包含页头页脚、广告位、相关推荐等周边内容 - 若页面是 SPA，路由切换时需动态更新
<main>的aria-live或触发focus()，否则读屏用户可能卡在旧内容上
<section> 和 <div> 的边界在哪
关键看有没有独立标题：<section> 必须能被 <h2>–<h6> 合理概括，否则就是 <div>。比如“用户评论区”配了 <h2>网友评论</h2>，就该用 <section>；而“加载中动画容器”没有语义标题，必须用 <div>。
立即学习“前端免费学习笔记（深入）”；
- 嵌套层级过深（如
<section><section><section>）会让结构树膨胀，影响读屏顺序和 SEO 权重分配 - 搜索引擎会把
<section>内的<h2>当作该区块主题词，若乱用，可能稀释主标题关键词权重 - CSS 中
section + section这类相邻选择器比.block + .block更可靠，但前提是 DOM 结构真实反映内容关系
最容易被忽略的是：语义化不是贴标签，而是建结构。一个 <article> 套着五个 <section> 却没有标题，比一个干净的 <div> 更损害体验。
