如何最优使用article与section标签？电商产品模块标签选择咨询

核心语义差异 #

• section：是主题性内容分组容器，用来把页面中同一主题的内容归为一块，通常会搭配标题（比如你例子里的<h2>Phones</h2>），它的价值在于划分页面的内容区域，本身无法脱离上下文独立存在。
• article：是独立可复用的内容单元，代表的是一段完整、有意义的内容，单独抽出来放到其他场景（比如另一个页面、移动端列表）依然能成立，比如产品卡片、新闻报道、博客帖子都属于这类。

你的示例完全合规 #

你写的这段代码是标准的语义化用法：

<section class="products">
     <h2>Phones</h2>
     <article class="product-card"></article>
</section>

这里用section包裹“手机产品”这个主题下的所有内容，里面的article作为单个独立的产品卡片，语义上完全匹配两者的设计初衷。

快速判断技巧 #

• 拿不准的时候先问：这个内容能不能单独拎出来用？比如把产品卡片复制到别的页面，依然能让用户看懂这是什么产品——能的话就用article。
• 如果只是用来归类一组相关内容，本身没有独立价值，比如“手机产品区”这个容器，就用section。
• 别把section当纯布局盒子用，如果只是为了加样式、做布局，用div更合适；反过来，article内部也可以嵌套section，比如一个产品卡片里，用section包裹“产品参数”“价格信息”这类子主题块。

内容的提问来源于stack exchange，提问作者Mohammad Ali Hossein Beik