必须唯一且不得含广告，因其是屏幕阅读器“m键直达”的唯一语义锚点；多个或混入广告/导航会导致跳转失效、可访问性崩溃。
为什么只能出现一次，且不能套广告位
大型应用里最常踩的坑，就是把 main 当成“视觉上最显眼的容器”来用。它实际是辅助技术的导航锚点——屏幕阅读器按 M 键直接跳入 main，跳过所有导航和页脚。如果页面里有两个 main，或把侧边栏、广告 banner 塞进去，读屏工具要么只认第一个，要么忽略全部，用户得手动听完整页。
常见错误现象：
- Next.js 或 Nuxt 的布局组件中重复渲染
main，子页面也带一个 -
main包裹了顶部 banner + 左侧菜单 + 内容区，变成“大杂烩” - 微前端子应用在 iframe 里擅自加
main，脱离主文档上下文
正确做法：全 DOM 树中确保唯一 main，且只包裹用户真正要操作/阅读的核心内容（如表单主区域、商品列表、文章正文），不包含导航、广告、弹窗、页脚。
什么时候该用，什么时候不该用
section 不是 div 的升级版，它是为「有标题的独立逻辑分段」准备的。滥用会污染文档大纲，让屏幕阅读器导航节点变多、变乱，反而更难定位。
判断依据很简单：
- 这块内容是否自带
<h2></h2>–<h6></h6>标题？没有标题就别套section - 它是否能单独被 RSS 抓取、邮件推送或聚合页引用？能 → 用
article；不能 → 才考虑section - 它是否属于已有专用语义标签的范畴？比如页脚用
footer，导航用nav，就别再包一层section
错误写法：<section><p>欢迎关注我们</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img
src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a>
<p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p>
</div>
<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div></section> —— 没标题、不可分发、无结构意义，纯属画蛇添足。
类名命名为什么不能写 .red-btn 或 .box1
大型项目协作时，类名不是给 CSS 看的，是给人看的。写 .red-btn 等于告诉所有人：“这个按钮现在是红的”，但下个月设计改稿，按钮变成蓝色，类名就失效甚至误导；.box1 更是等于没命名——没人知道它是什么、在哪、干啥用。
实操建议：
- 聚焦功能或内容角色，如
.search-submit、.user-profile-card、.notification-badge - 采用 BEM 规范，模块+元素+修饰符分层，如
.header__logo、.card--featured - 避免缩写、拼音、数字序号；禁止用样式描述词（
blue、left、big）
性能影响不大，但可维护性断崖式下跌——改一个颜色，要全局搜 red-btn，再判断哪些其实已不是红色。
标题层级断裂比不用语义标签更伤可访问性
很多团队花力气换掉了 div，却在标题上翻车：页面从 h2 开始、main 外堆了三个 h1、产品页小节用了 h3 但主内容还没出现 h2。这会让屏幕阅读器生成的文档大纲（outline）完全错乱，用户无法靠标题树快速跳转。
关键规则：
- 全页仅允许一个
h1，代表页面主主题（不是 logo 文字） - 标题必须严格递进：
h1→h2→h3，禁止跳级（如h1后直接h4） - 每个
section或article应有自己的标题，且层级符合上下文位置
最易被忽略的一点：CSS 隐藏了 h1 却没加 aria-hidden="true"，结果视觉不可见，语音仍播报两次——机器和人看到的完全不是一回事。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
