用figure标签包装div标签有什么作用？

Question

我想知道在figure标签中是否适合为每个缩略图添加包装div（就像下面例子代码中的那样）？

<figure>
  <div class="img-wrapper"><img src="castle1423.jpeg" title="Etching. Anonymous, ca. 1423." alt="The castle has one tower, and a tall wall around it."></div>
  <div class="img-wrapper"><img src="castle1858.jpeg" title="Oil-based paint on canvas. Maria Towle, 1858." alt="The castle now has two towers and two walls."></div>
  <div class="img-wrapper"><img src="castle1999.jpeg" title="Film photograph. Peter Jankle, 1999." alt="The castle lies in ruins, the original tower all that remains in one piece."></div>
</figure>

还有其他更适合/更简单的方法来结合html5语义和缩略图img元素的良好样式吗？

- infralabs

---

你所拥有的是绝对不错的。 - Alohci

Answer 1

建议使用嵌套的figure/figcaption标签。

 <figure>
 <figcaption>The castle through the ages: 1423, 1858, and 1999 respectively.</figcaption>
 <figure>
  <figcaption>Etching. Anonymous, ca. 1423.</figcaption>
  <img src="castle1423.jpeg" alt="The castle has one tower, and a tall wall around it.">
 </figure>
 <figure>
  <figcaption>Oil-based paint on canvas. Maria Towle, 1858.</figcaption>
  <img src="castle1858.jpeg" alt="The castle now has two towers and two walls.">
 </figure>
 <figure>
  <figcaption>Film photograph. Peter Jankle, 1999.</figcaption>
  <img src="castle1999.jpeg" alt="The castle lies in ruins, the original tower all that remains in one piece.">
 </figure>
</figure>

http://www.w3.org/html/wg/drafts/html/master/grouping-content.html#the-figure-element

- Steve Faulkner

---

换句话说：在那种情况下，你可以把figure标签当作div使用，对吧？ - infralabs