The figure
and figcaption
elements are two semantic elements that are often used together. If you haven’t looked at the spec, had a chance to use them in your projects, or have no idea how, here are some tips on how to use them correctly.
figure
和figcaption
元素是经常一起使用的两个语义元素。 如果您尚未查看规范 ,有机会在项目中使用它们,或者不知道如何使用,这里有一些正确使用它们的技巧。
The figure
element is commonly used for images:
figure
元素通常用于图像:
<figure>
<img src="dog.jpg" alt="Maltese Terrier">
</figure>
The figure
element represents a self-contained unit of content. This means that if you were to move the element either further down a document, or to the end of the document, it would not affect the document’s meaning.
figure
元素代表内容的独立单元。 这意味着,如果您将元素移到文档的更下方或文档的末尾,则不会影响文档的含义。
Therefore, we also need to remember that not every image is a figure
.
因此,我们还需要记住,并非每个图像都是一个figure
。
figure
多个图像 (Multiple Images in figure
)
You can put multiple img
tags in a figure
if they are related in the context of your document.
你可以把多img
的标签的figure
,如果他们在你的文档的上下文相关。
<figure>
<img src="dog1.jpg" alt="Maltese Terrier">
<img src="dog2.jpg" alt="Black Labrador">
<img src="dog3.jpg" alt="Golden Retriever">
</figure>
其他元素可以与figure
(Other Elements Can Be Used With figure
)
The figure
element is not limited to images either. You can use it for things such as:
figure
元素也不限于图像。 您可以将其用于诸如:
- code blocks, 代码块
- videos, 影片,
- audio clips, or 音频片段,或
- advertisements. 广告。
Here is an example of figure
being used for a block of code:
这是用于代码块的示例figure
:
<figure>
<pre>
<code>
p {
color: #333;
font-family: Helvetica, sans-serif;
font-size: 1rem;
}
</code>
</pre>
</figure>
嵌套figure
内另一个figure
(Nesting figure
Inside Another figure
)
You can nest a figure
inside another figure
if it makes sense to. Here, an ARIA role
attribute has been added to improve semantics.
如果可以的话,可以将一个figure
嵌套在另一个figure
中。 在这里,已经添加了ARIA role
属性以改善语义。
<figure role="group">
<figcaption>Dog breeds</figcaption>
<figure>
<img src="dog1.jpg" alt="Maltese Terrier">
<figcaption>Adorable Maltese Terrier</figcaption>
</figure>
<figure>
<img src="dog2.jpg" alt="Black Labrador">
<figcaption>Cute black labrador</figcaption>
</figure>
</figure>
For further guidance on using the figure
and figcaption
elements with ARIA, see my earlier article on how to use ARIA effectively with HTML5.
有关将figure
和figcaption
元素与ARIA一起使用的进一步指导,请参阅我的早期文章,内容是如何将HTML和HTML5有效地使用ARIA 。
正确使用figcaption
(Correct Usage of figcaption
)
The figcaption
element represents a caption or legend for a figure
.
所述figcaption
元素表示一个字幕或图例figure
。
Not every figure
needs a figcaption
.
并非每个figure
需要有figcaption
。
However, when using figcaption
, it should ideally be the first or last element within a figure
block:
但是,使用figcaption
,理想情况下,它应该是figure
块中的第一个或最后一个元素:
<figure>
<figcaption>Three different breeds of dog.</figcaption>
<img src="dog1.jpg" alt="Maltese Terrier">
<img src="dog2.jpg" alt="Black Labrador">
<img src="dog3.jpg" alt="Golden Retriever">
</figure>
Or:
要么:
<figure>
<img src="dog1.jpg" alt="Maltese Terrier">
<img src="dog2.jpg" alt="Black Labrador">
<img src="dog3.jpg" alt="Golden Retriever">
<figcaption>Three different breeds of dog.</figcaption>
</figure>
您也可以在figcaption
使用流元素 (You Can Use Flow Elements in figcaption
Too)
If you need to add more semantics to an image, you can use elements such as h1
and p
.
如果需要为图像添加更多语义,则可以使用诸如h1
和p
元素。
<figure>
<img src="dogs.jpg" alt="Group photo of dogs">
<figcaption>
<h2>Puppy School</h2>
<p>Championship Class of 2016</p>
</figcaption>
</figure>
Do you have any other tips for using the figure
and figcaption
elements?
您还有其他使用figure
和figcaption
元素的技巧吗?
翻译自: https://www.sitepoint.com/quick-tip-the-right-way-to-use-figure-and-figcaption-elements/