Question

我正在使用<figure>标记，如下所示：

<!DOCTYPE html>
<html>
<body>
<figure>
 <img src="img.jpg" alt="image" width="204" height="220">
</figure>
</body>
</html>

但是，如果我删除<figure>标记，它似乎没有任何区别。有人可以向我解释图标的用途是什么吗？

Answer 1

<figure>元素旨在与元素结合使用，以标记图表，插图，照片和代码示例（以及其他内容）。该规范说明了<figure>：

W3C

图元素表示内容单元，可选地带有标题，是自包含的，通常从文档的主流中引用为单个单元，并且可以远离主要流程文档不会影响文档的含义。

MDN

HTML <figure>元素表示自包含内容，通常带有标题<figcaption>，通常作为单个单元引用。虽然它与主流有关，但其位置与主流无关。通常这是一个图像，插图，图表，代码片段或主文本中引用的模式，但可以移动到另一个页面或附录而不影响主流。

Answer 2

好问题。

这归结为几件事-语义，SEO，可访问性（可能还有更多……）

这是什么？

元素是语义标记，它刚出现在HTML5中。这告诉浏览器是一个容器，其中包含彼此具有关系的元素。扮演这个角色，将在下面解释。

另外，请注意，它不必只包含元素，还可以包含其他元素，例如表格，视频剪辑，音频剪辑等

我们为什么要使用它？

在HTML5之前，没有用于图像，图表，视频等标题的元素。现在，它具有元素的语义。将帮助搜索引擎查找这些图像。

借助语义学，您的 SEO 得到了改善，机器人将在搜索引擎上更快地找到您的图片并将其显示在结果中。

可访问性

使用图形和无标题标记，用户（视障用户）将能够（在屏幕阅读器的帮助下）理解结构。屏幕阅读器bot会通知用户这是字幕内容，因此，如果将其放置在相关图像之后或之前，则用户将能够理解它。

受https://forum.freecodecamp.org/t/why-use-the-figure-element/315116/3启发的答案

Answer 3

使用标签的原因是因为它是HTML5语义。它没有分配给它的类特征。正如其他答案所指出的，您可以将其删除或替换为div，它实际上不会改变任何内容。但是，如果您要编写良好的“语义”代码，该代码在其标签中定义了含义，那么这就是您要包含的标准标签之一。
它类似于或和其他语义标记，它们以对浏览器和开发人员可读的方式定义您的代码。

Answer 4

<figure>标记的重点是它是主流的一部分，如果删除，它不会影响文档的流程（来源http://www.w3schools.com/tags/tag_figure.asp）

这就是为什么它主要用于图像，视频，动画等......

基本上，您可以将其视为包装标签，不会影响其子女的位置

html中'figure'标签的用途是什么？

4 个答案: