快速提示：正确使用Figure＆Figcaption元素的方法

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/