[HTML] 正确使用 Figure 和 Figcaption 标签（译）_html/css_WEB-ITnose

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

figure和 figcaption元素通常作为两个语义化的标签并一起使用。如果你没看过 这个细则，没有机会在项目中使用他们，或者不知道如何使用他们，那么这里提供一些提示以便你们正确使用。

figure标签通常用于图片元素：

<figure>  <img src="/static/imghwm/default1.png"  data-src="dog.jpg"  class="lazy" alt="Maltese Terrier"></figure> 

figure标签是一种独立于上下文的单元。这意味着无论你要把它移到什么地方，都不会影响他在文档的含义。

因此，我们也要记得，并不是所有的图像都是 figure。

figure里的多张图片

你可以在 figure中放入许多 img标记如果它们和你的内容相关。

<figure>  <img src="/static/imghwm/default1.png"  data-src="dog1.jpg"  class="lazy" alt="Maltese Terrier">  <img src="/static/imghwm/default1.png"  data-src="dog2.jpg"  class="lazy" alt="Black Labrador">  <img src="/static/imghwm/default1.png"  data-src="dog3.jpg"  class="lazy" alt="Golden Retriever"></figure> 

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

如果合理的话，你可以在 figure中嵌套 figure。在这里，ARIA 和 role属性的使用可以提高语义化。

<figurerole="group">  <figcaption>Dogbreeds</figcaption>  <figure>    <img src="/static/imghwm/default1.png"  data-src="dog1.jpg"  class="lazy" alt="Maltese Terrier">    <figcaption>AdorableMalteseTerrier</figcaption>  </figure>  <figure>    <img src="/static/imghwm/default1.png"  data-src="dog2.jpg"  class="lazy" alt="Black Labrador">    <figcaption>Cuteblacklabrador</figcaption>  </figure></figure> 

想要更多的了解如何搭配 ARIA 使用 figure和 figcaption，请看我之前写的文章 how to use ARIA effectively with HTML5。

正确使用 figcaption

figcaption标签用于说明 figure的标题或者内容。

并不是每个 figure都需要 figcaption。

但是，当使用 figcaption的时候，它应该成为 figure的开头或者最后一个 block：

<figure>  <figcaption>Threedifferentbreedsofdog.</figcaption>  <img src="/static/imghwm/default1.png"  data-src="dog1.jpg"  class="lazy" alt="Maltese Terrier">  <img src="/static/imghwm/default1.png"  data-src="dog2.jpg"  class="lazy" alt="Black Labrador">  <img src="/static/imghwm/default1.png"  data-src="dog3.jpg"  class="lazy" alt="Golden Retriever"></figure> 

或者

<figure>  <img src="/static/imghwm/default1.png"  data-src="dog1.jpg"  class="lazy" alt="Maltese Terrier">  <img src="/static/imghwm/default1.png"  data-src="dog2.jpg"  class="lazy" alt="Black Labrador">  <img src="/static/imghwm/default1.png"  data-src="dog3.jpg"  class="lazy" alt="Golden Retriever">  <figcaption>Threedifferentbreedsofdog.</figcaption></figure> 

你也可以在 figcaption中使用流元素

如果你希望给你的图像增加更多语义，你可以使用一些元素，比如 h1和 p。

<figure>  <img src="/static/imghwm/default1.png"  data-src="dogs.jpg"  class="lazy" alt="Group photo of dogs">  <figcaption>    <h2 id="PuppySchool">PuppySchool</h2>    <p>ChampionshipClass of 2016</p>  </figcaption></figure> 

你有一些其他的关于 figure或者 figcaption的小提示么？