main是商品详情页唯一合法主体容器，必须且只能有一个，因其是浏览器、读屏器和搜索引擎定位核心内容的语义锚点；header与footer须与其平级并同为body直接子元素，不可嵌套。
main 是商品详情页唯一合法的主体容器，其他任何语义标签都不能替代它来包裹核心内容。
为什么必须用 main 且只能有一个
浏览器和读屏工具依赖 main 快速定位页面主干；搜索引擎也把它作为内容权重的核心信号。商品详情页里，用户真正要读的图文、参数、规格选择器、加购按钮——这些都得塞进 main 里。常见错误是把面包屑、顶部导航栏、底部版权信息也塞进去，它们属于全局复用结构，应放在 main 外部。
以下结构是错的：
<main><header><nav>...</nav></header><section>商品图</section><footer>© 2026</footer></main>
正确做法是：header 和 footer 平级于 main，三者同为 body 的直接子元素。
main 里面能放什么、不能放什么
main 允许的直接子元素包括：article、section、aside、div（仅当无更合适语义标签时），但禁止嵌套 header、footer、nav 或另一个 main。
- 商品主图与描述区块建议用
article包裹，强调其独立可复用性（比如被 RSS 抓取或分享） - 参数表格、用户评价、关联推荐这类逻辑分组，用
section更准确 - 右侧“猜你喜欢”或“店铺公告”这类辅助内容，可用
aside，但注意它不能出现在article或section内部 - 绝对不要在
main里写... main，导致结构断裂
和 article 混用时的边界怎么划
商品详情页本身就是一个完整的、自包含的信息单元，所以整页 main 下通常只包一个 article；但如果页面同时展示多个商品（比如“搭配购买”模块），每个商品卡片才各自用 article，此时它们是 main 的并列子元素，而非嵌套关系。
容易踩的坑：
- 把“商品标题”写成
放在header里，结果main开头没h1—— 这违反了 HTML5 的标题层级规则，影响 SEO 和无障碍阅读 - 用
div替代section只为省事，结果所有区块语义丢失，后续加 CSS 类或 JS 选择器时不得不靠 class 名硬匹配 - 在
article内部又写了一个main，以为“这里是详情页的 main”，但规范明确禁止嵌套
最简但合规的骨架，就是 body 直接包含 header、main、footer 三层，其余所有商品内容严格落在 main 内部，且不越界使用语义标签。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
