Правильный способ использовать элементы figure и figcaption

Элементы figure и figcaption это два семантических элемента, которые часто используют вместе. Если вы не читали спецификацию, то для начала загляните сюда. Если вам пришлось использовать элементы в своем проекте, но вы не представляете как сделать это правильно, то ниже несколько подсказок, как использовать элементы корректно.

Элемент figure обычно используется для изображений:

<figure>
  <img src="dog.jpg" alt="Maltese Terrier">
</figure>

Элемент figure представляет собой автономный блок контента. Это означает, что если вы передвинете блок в любое место документа, то это не повлияет на смысл.

Так же мы должны помнить, что не каждая картинка представляет собой фигуру.

Несколько изображений внутри figure

Вы можете поместить несколько тегов 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 для оборачивания картинок — не единственное его назначение.

Вы можете использовать его для:
- блоков кода
- аудио
- видео или
- рекламных объявлений

Пример использования figure для блока с кодом:

<figure>
  <pre>
    <code>
      p {
          color: #333;
          font-family: Helvetica, sans-serif;
          font-size: 1rem;
      }
    </code>
  </pre>
</figure>

Вложение figure в другой тег figure

Вы можете вложит один блок figure в другой, если это имеет смысл.

В примере ниже добавлен атрибут 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>

Правильно использование 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