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

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/

版權聲明

翻譯的文章，版權歸原作者所有，隻用于交流與學習的目的。

原創文章，版權歸作者所有，非商業轉載請注明出處，并保留原文的完整連結。