main必须唯一且不嵌套，因其是页面语义中枢，唯一标识核心内容区域；若重复或嵌套在header、footer等标签内，将导致屏幕阅读器跳过内容、seo降权及axe工具报错。
大型电商项目里，HTML语义化不是“写得漂亮点”的选修课，而是防止样式错乱、JS失效、SEO掉坑的硬性防线——没做语义分层的页面，改个商品卡片边框可能让整个 main 区域宽度崩掉。
为什么 main 必须唯一且不嵌套
电商首页常出现“多个 main”或把 main 塞进 section 的写法，这直接触发 axe 工具报错，且部分屏幕阅读器会跳过第二个 main 后的所有内容。
-
main只能出现一次，且不能被header、footer、nav或另一个main包裹 - 商品列表页的主体内容（含筛选栏、排序控件、商品网格）应全部放在单个
main内，而非拆成多个“伪 main” - 若需复用商品卡片组件，用
article包裹单个商品，而不是给每个卡片加main
section 和 aside 在商品详情页怎么分
商品详情页里，“参数规格”“用户评价”“同类推荐”容易全塞进 section，但语义上只有前两者算 section，后者属于典型 aside。
-
section必须带标题（h2或更高），且内容与主商品强相关：如“商品参数”“售后服务说明” -
aside用于弱相关、可移除不影响主信息的内容：如“猜你喜欢”“浏览记录”“店铺推荐”，它们不参与 SEO 主权重计算 - 把“用户评价”放进
aside是常见错误——它和商品本身直接相关，应属section，否则 Googlebot 可能降权该区块
用 data-module 替代 class 定位模块的实操细节
电商项目里 class 名经常被样式覆盖或动态删掉，比如 class="header" 被 JS 清空后，document.querySelector('.header') 就失效了。
- 每个模块根元素统一加
data-module="product-list"、data-module="cart-summary"等，不依赖 class 名 - 配合
data-version="2.1"，CI 流程可自动比对 HTML 片段是否匹配当前文档版本 - 避免用
id：商品卡片循环渲染时，id="product-item"会重复，document.getElementById()只返回第一个 - JS 查询写成
document.querySelectorAll('[data-module="product-list"]')，稳定且可读性强
嵌套超过三层时的重构信号
电商长列表（如分类导航、促销 banner 堆叠）容易出现 div 套 div 套 section 套 article 的结构，审查元素要点四下才到目标节点。
- 理想嵌套控制在 3 层内：例如
body > main > article或body > section > ul > li - DOM 子元素超 50 个时，浏览器重排压力明显上升，建议用
section分块管理（如每 20 个商品一个section） - 检查冗余包裹层：Chrome DevTools → Elements → 右键节点 → “Break on” → “Attribute modifications”，能快速暴露被 JS 动态插入的无意义
div
语义标签不是写完就扔的装饰，而是 DOM 查询、无障碍检测、SEO 抓取的锚点；一旦结构松动，后续所有样式和脚本都会开始漂移——这点在多人协作的电商项目里，比任何 CSS 技巧都关键。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
