商品列表必须用<ul><li>结构以支持无障碍导航和富片段识别；<main>是JSON-LD生效的必需容器；<section>须按一级分类语义化划分区块。
电商商品列表必须用 <ul> + <li>，不是 <div> 堆砌；<main> 是 JSON-LD 富片段能生效的硬性前提；<section> 按一级分类划分区块，不是靠 class 模拟结构。
为什么商品列表必须用 <ul> 而不是 <div>
屏幕阅读器对 <div> 只读作“division”，无法识别这是商品集合；而 <ul> 会明确播报“列表，共12项”，用户可按 A 键跳转到下一个商品。电商列表天然满足「项目间无顺序依赖」——筛选、排序都是动态重排的，不构成执行逻辑，所以一律用 <ul>，别用 <ol>。
常见错误包括：
- 用 <div class="product-grid"> 包裹所有商品卡片
- 商品卡片内部用 <div class="product-item"> 而非 <li>
- <li> 缺失 id，或内部没包含 <h3>（如商品名）
正确结构要点：
- 每个 <li> 必须有唯一 id（如 id="product-1024"），否则键盘导航无法锚定
- <li> 内必须含至少一个 <h3> 或更高级标题
- 禁止把整个商品列表塞进一个 <div> ——这会让辅助技术误判为“单篇长文”
立即学习“前端免费学习笔记（深入）”；
<main> 不是可选标签，而是 JSON-LD 富片段的校验锚点
Google 要求 Product 类型的 JSON-LD 中 "@id" 字段必须匹配页面中某个真实 DOM 元素的 id 属性，且该元素必须位于 <main> 内。如果价格、库存、评价等字段散落在多个 <div class="product"> 中，即使 JSON-LD 写得再规范，爬虫也大概率无法对齐内容，导致富片段不展示或显示错误价格。
关键约束：
- 页面只能有一个 <main>，且必须包裹商品标题（<h1>）、主图（<figure>）、价格、库存等核心字段
- <aside>（促销弹窗）、<footer>（相关推荐）不能混入 <main>，否则污染内容可信度评分
- JSON-LD 中的 "url" 必须与当前页面 URL 完全一致（含协议、域名、路径、查询参数）
用 <section> 划分一级分类，别用 <div class="category-laptop">
每个一级分类（如「笔记本」「手机」「配件」）应独立包裹在 <section id="laptop"> 中，并配 <h2> 标题。这样既支持锚点跳转（#laptop），又方便 CSS 按区块控制间距、背景或响应式断点。
实操建议：
- <section> 是 HTML5 明确定义的分区元素，浏览器和爬虫都认；<div class="category-laptop"> 没语义，无法被屏幕阅读器识别，也不利于 SEO
- 单品内部推荐用 <figure> 放主图 + <figcaption> 放标题/价格，再用 <dl> 展示规格参数（品牌、CPU、内存等）
- 筛选逻辑应依赖 data-category 属性（如 <li data-category="laptop">），而不是 class 或 id —— 它才是筛选唯一可信源
价格、按钮、库存状态的语义化绑定不能只靠视觉
纯视觉对齐的“价格 ¥299”文字，屏幕阅读器不会自动关联到对应商品；点击“加入购物车”若只是 <div onclick="">，键盘用户无法聚焦，读屏无法识别动作为“按钮”。
必须做到：
- 价格用 <span itemprop="price"> 或嵌入 <strong> + aria-hidden="true" 配合视觉隐藏文本
- “缺货”状态必须用 JS 动态更新 itemprop="availability" 的 content 值，不能仅靠颜色变化
- 所有操作按钮必须是 <button type="button">，禁用 <div role="button"> —— 后者不触发原生 focus/keyboard 事件链
容易被忽略的一点：微格式标记（如 JSON-LD）本身不直接触发富片段，它只是“数据声明”；真正起作用的是 HTML 结构是否能让搜索引擎把这段声明，精准映射回页面上那个真实的 <span id="price-1024"> 节点。结构松散，标记就等于白写。
