电商大促页须用语义化标签：main为唯一根容器，楼层平级置于其中；section用于主题分组并配标题；article用于可独立传播内容；aside承载侧边补充信息；figure封装图文关联内容。
电商大促活动页通常信息密集、模块多样、视觉层级强，用对语义化标签不是为了“看起来像HTML5”，而是让每个楼层在结构上可被机器识别、被屏幕阅读器正确朗读、被搜索引擎精准归类——尤其当页面含轮播图、商品瀑布流、倒计时、榜单、优惠券弹窗等混合内容时，语义混乱会直接削弱转化率和无障碍体验。
main 是唯一主容器，所有楼层必须平级放在它里面
整个活动页只有一个 main，它是不可嵌套、不可省略、不可重复的根级内容容器。所有楼层（如“首页焦点图”“爆款清单”“品类分会场”“直播入口”“用户评价”）都应作为 main 的直接子元素，而不是塞进某个 div 或嵌套在 header/nav 里。
- ✅ 正确：<main><section id="banner">...</section><section id="hot-sales">...</section><article id="live-stream">...</article></main>
- ❌ 错误：把 banner 包在 <header> 里，或把商品列表放进 <aside>，或让整个 main 被 <div class="wrapper"> 包裹
- ⚠️ 注意：即使某楼层是 JS 动态加载的，初始 HTML 结构中仍需预留语义化占位，比如 <section id="coupon-draw" aria-live="polite"></section>
用 section 划分有主题但不独立的楼层
大多数活动楼层属于“主题分组”，不是独立可分发的内容，比如“百亿补贴专区”“家电以旧换新”“城市限定福利”，它们合起来才构成完整活动逻辑，拆开意义不全——这类就该用 section，且每个 section 应带明确标题（h2 或更高阶 heading）。
- ✅ 推荐写法：
<section id="subsidy-zone">
<header><h2>百亿补贴专区</h2></header>
<div class="product-grid">...</div>
</section> - ? 提示：section 不强制要求有标题，但无标题的 section 容易被辅助技术跳过；若实在无合适标题，优先考虑是否该用 div 替代
- ? 避免：用 section 包裹纯装饰性横幅、背景色块、分割线——这些属于表现层，语义上无需标记
用 article 标记真正可独立传播的楼层
只有具备完整语义闭环、能脱离当前页面单独存在并被理解的内容，才用 article。电商页中典型场景包括：单条直播预告（含主播、时间、看点）、一篇买家秀精选（含图、文、作者、时间）、一个限时闪购活动卡片（含倒计时、规则、商品快照）。
立即学习“前端免费学习笔记（深入）”；
- ✅ 示例：
<article id="live-20260728">
<header>
<h3>今晚8点｜空调专场直播</h3>
<time datetime="2026-07-28T20:00">今晚20:00开播</time>
</header>
<p>格力、美的、海尔三品牌直降，下单即赠安装服务…</p>
</article> - ✅ article 内部可嵌套多个 section（如“今日主推”“往期回看”“粉丝问答”），但不要把整页商品列表塞进一个 article
- ⚠️ 注意：商品卡片本身不是 article——它是列表项，应放在 <ul> 或 <ol> 中；但若该卡片是 RSS 订阅源里的独立条目（如“每日好物推荐”邮件落地页），则可用 article
aside 和 figure 用在补充与图文强关联处
侧边固定浮层（如客服入口、优惠券领取浮窗）、右栏榜单（如“实时热销榜”“本地同城热卖”）属于与主楼层相关但可移除不影响主线的信息，适合用 aside。而楼层中所有插图、海报、流程图、价格对比表，只要自带说明文字，就该用 figure + figcaption 封装。
- ✅ aside 示例：
<aside aria-label="促销辅助工具">
<h3>你的专属优惠</h3>
<p>已领￥50无门槛券</p>
</aside> - ✅ figure 示例：
<figure>
<img src="price-comparison.png" alt="满300减50 vs 满500减100对比示意图">
<figcaption>叠加平台券后，满500减100更划算（截至7月28日18:00）</figcaption>
</figure> - ? 避免：把导航菜单、页脚链接、底部版权栏放进 aside —— 它们不属于“侧边补充”，而是结构性元素
