只能出现一次且不能嵌套，因w3c规定其代表页面唯一独立主体内容，嵌套会导致无障碍工具报错、屏幕阅读器忽略、seo降权；必须为顶层块级元素，直接子元素应为、等。
为什么只能出现一次，且不能嵌套在
因为 W3C 明确规定 <main></main> 表示页面中“唯一、独立、可分发”的主体内容，浏览器和 axe 等无障碍检测工具会直接报错——比如 ARIA: main landmark is not unique。一旦嵌套在 <nav></nav> 或另一个 <main></main> 里，语义就崩了：屏幕阅读器会忽略内部的 <main></main>，搜索引擎也可能降权整块区域。
-
<main></main>必须是顶层块级元素，直接子元素应为<header></header>、<article></article>、<section></section>等，不能是<div> 包裹层 <li>多个文章列表页？用 <code><article></article>分别包裹每条内容，<main></main>只包一层容器 - 后台管理系统有多个“主视图”？别硬塞进一个
<main></main>，改用role="main"+aria-live动态切换焦点（但这是退化方案，优先重构路由） -
<article></article>用于可独立存在、可被 RSS 抓取或单独分享的内容（如博客、新闻、产品卡片） -
<aside></aside>必须与当前上下文强相关（如某篇文章旁的作者简介），不是“右边那个 div”就叫 aside - 纯装饰性分隔线、空白 padding 区域，不用任何语义标签，靠 CSS 实现
- JS 中统一用
document.querySelector('[data-module="product-list"]')，避免document.querySelector('.js-product-list')这类脆弱选择器 - CI 流程可校验 HTML 是否含
data-module="checkout-flow"且版本号匹配文档data-version="2.1" - 禁止用
id做模块标识——循环渲染时必然重复，document.getElementById()只返回第一个 - Chrome DevTools → Elements → 右键节点 → “Break on” → “Attribute modifications”，能快速暴露冗余包裹层
- 两个相邻
<section></section>主题一致？合并，用<h2></h2>和<h3></h3>分隔子区块 - 组件级封装用
DocumentFragment批量插入，别一层层appendChild
什么时候该用，而不是或
<section></section> 不是视觉分块工具，它代表“有明确主题的逻辑区块”，比如“用户评论区”“技术参数表”“相关推荐”。如果里面没配 <h2></h2> 或更高层级标题，基本就是误用——axe 会提示 Section lacks heading。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
data-module 比 class 更适合 JS 查询和 CI 校验
靠 class="header-v2" 做 DOM 查询，等于把样式逻辑和功能逻辑绑死。设计师改个色、组件库升级，class 名还在，但 JS 绑定可能已失效。而 data-module="search-bar" 是稳定锚点，不随 UI 变动。
嵌套超过三层就该警觉
一个 <div><div><div><div> 结构，不仅拖慢 DevTools 定位，更让 <code>querySelector 变得不可靠——.content 可能命中弹窗里的同名 class，而 main section article p 这种路径又太脆弱。
main 不只是给屏幕阅读器看的，它是你写 document.querySelector('main') 时唯一能稳稳拿到主体内容的保证。一旦堆 div，这个保证就没了。
