电商首页商品列表必须唯一且直接包裹在<main>中，每件商品用<article>独立封装并含唯一id和标题，分页需用<nav>标注，<main>须重置margin避免Safari渲染异常。
<main></main> 必须唯一且直接包裹商品列表，否则 SEO 会降权、屏幕阅读器无法定位核心内容。
为什么电商首页不能套两层 <main></main>
常见错误是把整个页面用一个 <main></main> 包住，里面再嵌套 <header></header>、<nav></nav>、甚至另一个 <main></main> —— 这违反 HTML5 规范，Google 会忽略全部 <main></main> 标签，导致主体内容信号丢失。
-
<main></main>全页只能出现一次，且必须是的直接子元素 - 商品列表本身不是独立可分发单元，所以不能用
<article></article>直接包裹整个列表；但每件商品必须是<article></article>（带id和标题） - 页头的 logo、主导航、搜索框属于
<header></header>+<nav></nav>，和<main></main>并列，不能塞进<main></main>里
<ul class="product-list"></ul> 是商品列表唯一合法容器
用 <div class="product-grid"> 渲染商品流，对爬虫和读屏器等于“一堆无意义方块”。<code><ul></ul> 明确告诉辅助技术：“这是可遍历的项目集合”，支持快捷键跳项（如 JAWS 的 I 键）。
- 每个商品必须是
<li class="product-item">，且带唯一id（如id="product-8842"），否则键盘导航锚点失效 -
<li>内部必须含<h3></h3>或更高级标题（通常是商品名），不能只有图片+价格 - 禁止把所有商品写成平铺的
<div>，哪怕加了 ARIA role="listitem" 也不如原生 <code><li>可靠<article></article>每个商品都得有，但不能滥用单个商品卡片必须用
<article></article>，因为它满足“可独立分发”：能被 RSS 抓取、可单独分享链接、脱离上下文仍语义完整。但别把轮播图、广告位、筛选栏也套<article></article>—— 这属于伪语义化，反而干扰爬虫判断。立即学习“前端免费学习笔记（深入）”；
-
<article></article>必须含至少一个标题（<h3></h3>最常用），否则在文档大纲中消失，影响 SEO 结构识别 - 价格、库存状态、按钮不能裸写文字或
<div onclick="">：价格建议用 <code><span class="price"></span>+ 视觉隐藏文本；“加入购物车”必须是<button type="button"></button> - 缺货提示不能只靠颜色变化，要用
aria-live="polite"动态更新，确保读屏器播报 - 分页链接必须是
<a href=""></a>，不能用<span onclick=""></span>模拟 - 当前页要加
aria-current="page"，例如<a href="https://www.php.cn/link/3b4cee4f0fc5f6106934ce46ad5706dc" aria-current="page">3</a> - 前后页按钮需含文本（如“上一页”“下一页”），不可仅用箭头符号，否则读屏器无法理解意图
<nav aria-label="商品分页"></nav>必须显式标注分页控件常被写成纯 CSS 样式的
<div class="pagination">，但屏幕阅读器只会读作“division”，用户完全不知道这是导航功能。必须用 <code><nav></nav>并加上aria-label显式说明用途。最容易被忽略的是
<main></main>的重置样式：main { margin: 0; }必须加，否则旧版 Safari 会额外渲染 top margin，导致首屏商品被切掉一截。 -
