figure и figcaption

Элементы figure и figcaption часто используют вместе. Элемент figure обычно используется для изображений (но это обязательно):


<figure>
  <img src="cat.jpg" alt="My cat">
</figure>

Можно поместить несколько изображений в figure, если они связаны по смыслу.


<figure>
  <img src="cat1.jpg" alt="My one cat">
  <img src="cat2.jpg" alt="My second cat">
</figure>

Вместо изображения вы также можете использовать блоки кода, аудио и видео, рекламный блок.


<figure>
  <pre><code>
      p {
        color: #2244bb;
      }
  </code></pre>
</figure>

Допустимо вложение одного figure в другой figure.

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


<figure>
  <figcaption>My cats</figcaption>
  <img src="cat1.jpg" alt="Cats">
  <img src="cat2.jpg" alt="Cats">
  <img src="cat3.jpg" alt="Cats">
</figure>

При желании можете использовать дополнительные элементы в figcaption: h2, p, span и т.д.

Вернуться в раздел CSS

figure и figcaption

Реклама