必须且只能出现一次，因其是w3c强制定义的唯一语义锚点，用于屏幕阅读器“m键直达”、搜索引擎提取主题及lighthouse/axe校验；重复或缺失将导致无障碍失效、seo错乱、检测报错。
高可维护性 HTML 骨架不是靠“写得漂亮”，而是靠结构语义精准、层级克制、锚点解耦——这三点没守住，CSS 再规范、JS 再模块化也救不回来。
为什么只能有一个，且必须存在
浏览器、屏幕阅读器、Lighthouse 和 axe 工具都依赖 main 作为页面主体内容的唯一锚点。多个 main 会触发无障碍报错；完全缺失则导致 SEO 抓取权重分散、辅助技术无法定位核心内容。
- SPA 场景下，
main应包裹实际渲染区域（如#app内部），而非仅套在静态壳层里 -
main必须直接包含至少一个h1–h6，否则会被部分爬虫视为“无实质内容” - 服务端渲染时，若模板中
main被条件注释或动态移除，需确保 fallback 内容仍符合语义流
用
语义标签不是“能用就用”，而是“该用才用”。滥用 section 或 article 反而破坏结构可信度。
-
header不等于“顶部横幅”：它可出现在article或section内部，表示该区块的标题区；全局页眉应为body > header -
nav只包裹导航链接，logo、搜索框、用户头像应归入header，而非塞进nav里再用 CSS 挤开 -
aside不是“右边栏”：它必须与当前上下文强相关（如博客文末的作者简介），纯广告位或通用工具栏用div+data-module="ad-banner"更准确 - 连续两个
section若主题一致（如“产品介绍”+“产品参数”），优先合并并用h2/h3分层，而非硬拆
data- 属性才是 JS 模块锚点的唯一可靠方案
靠 class="header-v2" 或 id="product-list" 绑定 JS，等于把样式逻辑和交互逻辑焊死。一旦改名或复用组件，document.querySelector('.header-v2') 就静默失效。
- 统一使用
data-module="header"、data-module="product-grid"，版本号用data-version="2.1" - 避免
id用于 JS 查询：循环渲染商品卡片时，id="card-1"会重复，document.getElementById()只返回第一个 - 查询时用
document.querySelectorAll('[data-module="header"]')，既稳定又支持多实例 - 配合构建流程，CI 可校验
data-module值是否存在于文档规范中，提前拦截不一致
嵌套深度超过三层就必须重构
DOM 层级过深不仅拖慢渲染，更让审查元素变成寻宝游戏：div > div > div > p 结构里，改个文字颜色可能要翻五层 CSS 选择器。
- Chrome DevTools 中右键节点 → “Break on” → “Attribute modifications”，能快速暴露冗余包裹层
- 常见陷阱：
<div class="container"><div class="wrapper"><main>...</main></div></div>—— 直接用<main class="container"></main>即可 - Flex/Grid 容器内子项无需额外
div包裹：按钮组用<nav class="btn-group">...</nav>，别写<div><nav>...</nav></div> - 模板引擎中避免“安全起见多套一层”，每个
div都要回答：“它承载什么语义？删掉会影响 JS 查询或无障碍吗？”
真正难的不是记住所有标签规则，而是在每次新增一个 div 时停下来问一句：这个节点，浏览器需要知道它是啥，还是只需要它“长得像啥”？
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
