[翻译]小提示：使用figure和figcaption元素的正确方式

Posted 2020-07-07 脚后跟着猫

figure和figcaption是一对经常被一起使用的语义化标签。如果你还没有看过规范中的定义，现在有机会在你的项目中使用它们了。如果你不知道怎么用，下面是关于如何正确使用它们的一些提示。

figure元素经常用于image：

<figure>
  <img src="dog.jpg" alt="Maltese Terrier">
</figure>

figure元素表示内容的自包含单元。这个含义是，如果你把元素无论是移出文档或移动到文档的底部，它都不会影响文档的意思。

尽管如此，还是需要记住一点，并不是所有的image都是一个figure.

figure元素包含多个image

如果文档中多个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标签

figure元素并不局限于在image上使用，你也可以做类似这些事：

• 代码块
• 视频
• 音频剪辑
• 广告

下面是一个使用figure来表示代码块的例子

<figure>
  <pre>
    <code>
      p {
          color: #333;
          font-family: Helvetica, sans-serif;
          font-size: 1rem;
      }
    </code>
  </pre>
</figure>

可以嵌套使用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>

有关如何在figure和figcaption元素上使用ARIA的详细，可以看之前的文章《如何在html5中有效使用ARIA》

使用figcaption的正确方式

figcaption元素表示figure的一个图例或标题。

并不是所有的figure都需要figcaption

然而，当使用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>

或

<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中包含其它标签元素

如果希望给图像添加更多语义，你可以使用其它元素，如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>

你在使用figure和figcaption元素时，还有其它哪些方面，在这里没有提到的，可以在评论中写出来。

原文：Quick Tip: The Right Way to Use Figure & Figcaption Elements

作者：Georgie Luhur

原文链接：https://www.sitepoint.com/quick-tip-the-right-way-to-use-figure-and-figcaption-elements/