原文： Quick Tip: The Right Way to Use Figure & Figcaption Elements
figure和 figcaption元素通常作为两个语义化的标签并一起使用。如果你没看过 这个细则，没有机会在项目中使用他们，或者不知道如何使用他们，那么这里提供一些提示以便你们正确使用。
figure标签通常用于图片元素：
<figure> <imgsrc="dog.jpg" alt="Maltese Terrier"></figure>
figure标签是一种独立于上下文的单元。这意味着无论你要把它移到什么地方，都不会影响他在文档的含义。
因此，我们也要记得，并不是所有的图像都是 figure。
你可以在 figure中放入许多 img标记如果它们和你的内容相关。
<figure> <imgsrc="dog1.jpg" alt="Maltese Terrier"> <imgsrc="dog2.jpg" alt="Black Labrador"> <imgsrc="dog3.jpg" alt="Golden Retriever"></figure>
figure元素中不仅仅只能放入图片，你也可以放入以下内容：
这里是一个 figure中放入代码块的例子：
<figure> <pre class="brush:php;toolbar:false"> <code> p { color: #333; font-family: Helvetica, sans-serif; font-size: 1rem; } </code> 如果合理的话，你可以在 figure中嵌套 figure。在这里，ARIA 和 role属性的使用可以提高语义化。
<figurerole="group"> <figcaption>Dogbreeds</figcaption> <figure> <imgsrc="dog1.jpg" alt="Maltese Terrier"> <figcaption>AdorableMalteseTerrier</figcaption> </figure> <figure> <imgsrc="dog2.jpg" alt="Black Labrador"> <figcaption>Cuteblacklabrador</figcaption> </figure></figure>
想要更多的了解如何搭配 ARIA 使用 figure和 figcaption，请看我之前写的文章 how to use ARIA effectively with HTML5。
figcaption标签用于说明 figure的标题或者内容。
并不是每个 figure都需要 figcaption。
但是，当使用 figcaption的时候，它应该成为 figure的开头或者最后一个 block：
<figure> <figcaption>Threedifferentbreedsofdog.</figcaption> <imgsrc="dog1.jpg" alt="Maltese Terrier"> <imgsrc="dog2.jpg" alt="Black Labrador"> <imgsrc="dog3.jpg" alt="Golden Retriever"></figure>
或者
<figure> <imgsrc="dog1.jpg" alt="Maltese Terrier"> <imgsrc="dog2.jpg" alt="Black Labrador"> <imgsrc="dog3.jpg" alt="Golden Retriever"> <figcaption>Threedifferentbreedsofdog.</figcaption></figure>
如果你希望给你的图像增加更多语义，你可以使用一些元素，比如 h1和 p。
<figure> <imgsrc="dogs.jpg" alt="Group photo of dogs"> <figcaption> <h2>PuppySchool</h2> <p>ChampionshipClass of 2016</p> </figcaption></figure>
你有一些其他的关于 figure或者 figcaption的小提示么？
