figure 和 figcaption 元素的正确使用方式

发布于 静子

figurefigcaption是两个经常在一起使用的语义化元素。如果你还没有在规范中了解过他们,没有机会在项目中使用过他们,或者说现在对他们还是一无所知,这里就给大家讲一些如何正确使用他们的小技巧。

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元素不仅仅只限于图片的使用,也适用于其他元素,如下:

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

这里有一个codefigure元素中的应用:

<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>

有关于如何正确处理figurefigcaption元素与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中使用其它元素

你需要对一张图片添加更多的语义,这时你可以使用多个元素,如:h1p.

<figure>
    <img src="dogs.jpg" alt="Group photo of dogs">
    <figcaption>
        <h2>Puppy School</h2>
        <p>Championship Class of 2016</p>
    </figcaption>
</figure>

你有使用figurefigcaption元素的其他技巧吗?如果有的话,欢迎在评论中与我们一起分享。

扩展阅读

本文根据@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