在电商网站的商品列表页，以下是一些 HTML 语义化的做法：
整体布局
可以使用<main>标签包裹商品列表的主要内容，表明这是页面的核心部分。例如：<main id="product - list - main">，里面放置所有商品相关信息。
商品分组
对于一组商品，可以用<section>标签来划分。比如按类别划分商品，<section class="clothes - section">可以用于包含所有服装类商品。
单个商品呈现
每个商品可以用<article>标签包裹，代表一个独立完整的内容单元。如<article class="product - item">。
- 商品图片部分可以使用`<img>`标签，并添加有语义的`alt`属性来描述图片内容，例如`<img src="product1.jpg" alt="红色连衣裙正面图">`。
- 商品名称使用`<h3>`标签来突出显示，如`<h3>时尚红色连衣裙</h3>`，表明这是商品的重要标题信息。
- 商品价格部分可以使用`<span class="price - tag">199元</span>`，语义上可以方便区分价格内容。
- 可以添加一个简短的商品描述，使用`<p class="product - desc">这款连衣裙采用优质面料，时尚修身设计。</p>`。
排序和筛选功能
排序选项（如按价格升序、降序，按销量排序等）可以放在<nav>标签内，作为导航性质的功能模块，例如<nav class="sort - nav"><ul><li>按价格升序</li><li>按销量排序</li></ul></nav>。
筛选功能（如筛选颜色、尺码等）也可以用<form>标签包裹相关的筛选选项，如<form class="filter - form"><label for="color - filter">颜色筛选：</label><select id="color - filter"><option>红色</option><option>蓝色</option></select></form>。
商品促销信息
对于正在促销的商品，可以使用<mark>标签来突出显示促销内容。比如，如果商品在打折，可以这样写：<p>原价<del>299元</del>，现价<mark>199元</mark></p>，其中<del>表示删除的原价，<mark>很直观地展示出促销价格。
商品评分和评论数量
可以用<div class="rating - section">包裹商品评分相关内容。里面用<meter>标签来展示评分数值，例如<meter value="4" min="0" max="5">4分</meter>表示商品评分为 4 分（满分 5 分）。再搭配<span class="review - count">(123条评论)</span>来显示评论数量，语义上更明确地传达了商品受消费者关注的程度。
商品库存状态
利用<data>标签来表示商品库存相关数据。例如<data value="in - stock">有货</data>或者<data value="out - stock">缺货</data>，这样可以让机器更好地理解商品库存状态，同时方便进行样式设置和数据交互。
商品品牌信息
为商品品牌单独设置语义标签，如<p class="brand - info"><strong>品牌：</strong> <span class="brand - name">ABC品牌</span></p>，用<strong>突出品牌关键词，<span>包裹品牌名称，方便对品牌部分进行样式和内容的管理。
商品链接
为每个商品添加链接时，使用<a>标签并添加有意义的href属性指向商品详情页。例如<a href="product - details.html?id=123" class="product - link">查看商品详情</a>，这不仅方便用户导航，也有助于搜索引擎理解页面结构。
示例
- ```
<main id="product-list-main">
<!-- 商品分组，这里假设是服装类商品分组 -->
<section class="clothes-section">
<!-- 单个商品呈现 -->
<article class="product-item">
<!-- 商品图片 -->
<img src="product1.jpg" alt="时尚红色连衣裙正面图">
<!-- 商品名称 -->
<h3>时尚红色连衣裙</h3>
<!-- 商品价格 -->
<p>原价<del>299元</del>，现价<mark>199元</mark></p>
<!-- 商品描述 -->
<p class="product-desc">这款连衣裙采用优质面料，时尚修身设计。</p>
<!-- 商品评分和评论数量 -->
<div class="rating-section">
<meter value="4" min="0" max="5">4分</meter>
<span class="review-count">(123条评论)</span>
</div>
<!-- 商品库存状态 -->
<p><data value="in-stock">有货</data></p>
<!-- 商品品牌信息 -->
<p class="brand-info"><strong>品牌：</strong> <span class="brand-name">ABC品牌</span></p>
<!-- 商品链接 -->
<a href="product-details.html?id=123" class="product-link">查看商品详情</a>
</article>
<!-- 另一个单个商品呈现 -->
<article class="product-item">
<img src="product2.jpg" alt="蓝色牛仔裤正面图">
<h3>经典蓝色牛仔裤</h3>
<p>价格：<span class="price-tag">249元</span></p>
<p class="product-desc">经典直筒牛仔裤，舒适耐穿。</p>
<div class="rating-section">
<meter value="3.5" min="0" max="5">3.5分</meter>
<span class="review-count">(87条评论)</span>
</div>
<p><data value="in-stock">有货</data></p>
<p class="brand-info"><strong>品牌：</strong> <span class="brand-name">XYZ品牌</span></p>
<a href="product-details.html?id=456" class="product-link">查看商品详情</a>
</article>
</section>
</main>
<!-- 排序选项 -->
<nav class="sort-nav">
<ul>
<li>按价格升序</li>
<li>按销量排序</li>
</ul>
</nav>
<!-- 筛选功能 -->
<form class="filter-form">
<label for="color-filter">颜色筛选：</label>
<select id="color-filter">
<option>红色</option>
<option>蓝色</option>
<option>其他</option>
</select>
<label for="size-filter">尺码筛选：</name>
<select id="size-filter">
<option>s</option>
<option>m</option>
<option>l</option>
<option>xl</option>
</select>
</form>
