html - 对于带有文本的图像网格，使用 还是 标签更好？

Question

我正在尝试编写这样的页面:

这是一个带有文本的 4 x 4 布局网格。我开始使用文章标签对其进行编码，但在尝试执行第二行时卡住了。应该改用 li 标签吗？非常感谢任何建议。谢谢

下面是css & html:

.product-col-one {
  float: left;
  margin: 0px 0px 30px;
  width: 175px;
  height: 175px;
  background-color: #99BF38;
}
.product-col-two {
  float: left;
  margin: 0px 0px 30px;
  width: 175px;
  height: 175px;
  background-color: #99BF38;
}
.product-col-three {
  float: left;
  margin: 0px 0px 30px;
  width: 175px;
  height: 175px;
  background-color: #99BF38;
}
.product-col-four {
  float: left;
  margin: 0px 0px 30px;
  width: 175px;
  height: 175px;
  background-color: #99BF38;
}

<div class="product-col-one" style="position:relative; left:100px;  
     top:30px">
  <article>
    <div class="col-thumb">
      <img src="image/teddy04-175x140.jpg" width="175px" height="140px" alt "">
    </div>
    <!-- end col-thumb -->
    <h6>Henry Teddy Bear</h6>
  </article>
</div>
<!-- end product-col-one -->

<div class="product-col-two" style="position:relative; left:125px;    
      top:30px">
  <article>
    <div class="col-thumb">
      <img src="image/teddy03-175x140.jpg" width="175px" height="140px" alt "">
    </div>
    <!-- end col-thumb -->
    <h6>James Teddy Bear</h6>
  </article>
</div>
<!-- end product-col-two -->

<div class="product-col-three" style="position:relative; left:150px;
     top:30px">
  <article>
    <div class="col-thumb">
      <img src="image/teddy02-175x140.jpg" width="175px" height="140px" alt "">
    </div>
    <!-- end col-thumb -->
    <h6>Andrew Teddy Bear</h6>
  </article>
</div>
<!-- end product-col-three -->

<div class="product-col-four" style="position:relative; left:175px;  
      top:30px">
  <article>
    <div class="col-thumb">
      <img src="image/teddy175x140.jpg" width="175px" height="140px" alt "">
    </div>
    <!-- end col-thumb -->
    <h6>John Teddy Bear</h6>
  </article>
</div>
<!-- end product-col-four -->

Answer 1

参见 <article> 的定义:

The article element represents a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

参见 <li> 的定义:

The li element represents a list item. If its parent element is an ol, or ul, then the element is an item of the parent element's list, as defined for those elements. Otherwise, the list item has no defined list-related relationship to any other li element.

根据站点中元素的语义选择更好的一个。例如

• 如果您的网站是某种博客，您每天都会在其中发布一张泰迪熊的照片和一个小文本，article可以适当。
• 如果您的网站有一个泰迪熊图片列表，链接到人们可以购买它们的页面，li可能更合适。