<figure> 标签有什么用？

Question

我发现了一些教程，建议在<figure>中包装图像或徽标。到目前为止，我看到的是，它在图像周围添加了一些空白，并将显示属性从内联块更改为内联块(显然(，但就SEO甚至HTML架构而言，使用<figure>有什么好处？

来自W3schools:

<figure>
  <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
</figure> 

http://www.w3schools.com/Tags/tag_figure.asp

感谢

Answer 1

首先，请避免使用W3Schools。主要原因是他们发布了很多不准确的信息。在Mozilla开发者网络(MDN(上可以找到一个更好的web开发环境。

特别是在他们的<图>第页。

<figure>基本上只是另一个HTML5元素，它被定制为更符合所创建的HTML结构的语义。这也是为什么我们创建了<article>、<section>、<aside>和<nav>标签的原因，这样开发者和机器人在阅读页面源代码时可以更好地理解内容，而不是到处都是<div>，让它变得混乱。

Answer 2

AFAIK，HTML5中的<figure>标记是HTML <img>+<pre> tag for code snippet的组合。

引自MDN

通常这是一幅图像、一幅插图、一张图表、一段代码片段，或在正文中引用但可以移动的架构到另一页或附录，而不影响主流。