使用文章</li> </article>的<article>或<li>标签更好吗？

Question

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

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

以下是css＆amp; HTML：

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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 -->

＆＃13;

＆＃13;

＆＃13;

Answer 1

请参阅<article>的定义：

  

article元素represents完整，或   文档，页面，应用程序或站点中的自包含，组合   原则上，这是可独立分发或可重复使用的，   例如在联合。这可能是一个论坛帖子，杂志或   报纸文章，博客文章，用户提交的评论，以及   交互式小部件或小工具，或任何其他独立项目   内容。

请参阅<li>的定义：

  

li元素表示列表项。如果它的父元素是   ol或ul，则元素是父项的项目   元素列表，为这些元素定义。否则，列表   item与任何其他li没有已定义的列表相关关系   元件。

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

• 如果您的网站是某种类型的博客，您每天都会发布带有小文字的泰迪熊照片，article可能是合适的。
• 如果您的网站上有一张泰迪熊图片列表，这些图片会链接到人们可以购买的页面，li可能更合适。

Answer 2

我认为li以及<figure>标记为article意味着要有一些代表某些信息的文字内容。 您必须将li与figure代码一起使用，并使用caption代替h6。