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

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”標簽的目的是什么？