figure 和 figcaption 元素的正确使用方式
figure和figcaption是两个经常在一起使用的语义化元素。如果你还没有在规范中了解过他们，没有机会在项目中使用过他们，或者说现在对他们还是一无所知，这里就给大家讲一些如何正确使用他们的小技巧。
figure元素经常用于图片,如下所示:
<figure>
<img src="dog.jpg" alt="Maltese Terrier">
</figure>
figure元素表示内容的一个自包含单元。这就意味着你要么可以在文档中向下移动该元素，要么使其处于文档的底部，它都不会影响文档的含义。
因此，我们需要记住，不是每一个图片都是一个figure.
figure中有多张图片
你可以在一个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元素不仅仅只限于图片的使用，也适用于其他元素，如下:
- 代码块
- 视频
- 音频剪辑
- 广告
这里有一个code 在 figure元素中的应用:
<figure>
<pre>
<code>
p {
color: #333;
font-family: Helvetica, sans-serif;
font-size: 1rem;
}
</code>
</pre>
</figure>
figure中嵌套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？
有关于WAI-ARIA更多的教程，可以阅读《WAI-ARIA 无障碍Web规范》一文。
正确使用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元素的其他技巧吗？如果有的话，欢迎在评论中与我们一起分享。
扩展阅读
- HTML5 Accessibility Chops: the figure and figcaption elements
- Quick Tip: Consider Wrapping Your Code With a “figure” Element
本文根据@Georgie Luhur的《Quick Tip: The Right Way to Use Figure & Figcaption Elements》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://www.sitepoint.com/quick-tip-the-right-way-to-use-figure-and-figcaption-elements/。
如需转载，烦请注明出处：https://www.fedev.cn/html5/quick-tip-the-right-way-to-use-figure-and-figcaption-elements.htmlChampion Rev Weave Pant Black