元素“自包含”是什么意思

Question

我对 HTML 很陌生。 我正在关注在线教程。 我需要在页面上放置一些图像，并且需要将这些图像包含在<figure>标记中。 本教程没有解释为什么我需要这样做。 事实上，它根本没有提供关于<figure>标记的信息。 所以，我用谷歌搜索了它，这就是我发现的：

HTML（带可选标题的图）元素表示自包含内容，可能带有可选标题，使用 ( <figcaption> ) 元素指定。 图、它的标题和它的内容被作为一个单元引用。

强调我的。

这个解释对我没有帮助。 请有人解释一下“自包含内容”是什么意思？ 不是所有内容本质上都是“独立的”吗？ 如果不是，那么对任何元素的任何调整都会影响其他所有元素。 “自包含内容”是 web 设计中具有特殊含义的某种保留术语吗？ 我只是不明白在这种情况下内容“独立”意味着什么。 因此，我无法理解<figure></figure>标签的意义。

非常感谢。

Answer 1

不，“自包含”的含义来自英文，在 web 设计中不是一个具有特殊含义的术语。

“自成一体”意味着独立于其周围环境。 <figure>元素的最佳理解方式类似于教科书中的图形。 为便于阅读，图表通常印在说明图表内容与整章相关性的文本附近。 但是您也可以只阅读该图并理解它告诉您的内容，而无需阅读它出现的上下文。

所以你可以把所有的数字都移到书中的其他地方，你可以在第一次打开这本书的那个数字所在的那一页时，你仍然可以理解这个数字在告诉你什么。 只要文本需要引用该图，它就可以这样做，例如说“参见图 23b”，它就可以作为一个图使用。

Answer 2

自包含意味着元素明确定义了它的内容，例如<div>和<span>并没有像<table> 、 <article>等那样告诉你自己语义元素

像 table 这样的自包含元素定义了一组 styles 本身，如display:table ，以及它的内部子元素（例如行和单元格）

<main>或<footer>等其他自包含元素用于清洁代码和开发人员友好的标记命名

对于<article> ，一篇文章本身应该是有意义的，并且应该可以独立于 web 站点的 rest 阅读它。

此外，HTML 语义对 SEO 有好处，例如 header 标签<h1> ， <h2> ，...

本文定义了这些元素如何帮助更好地为搜索引擎定义页面内容， HTML5 对 SEO 意味着什么。

关于<figure>标签的目的，请检查这些答案关于html 中“figure”标签的目的是什么？