Тег <figcaption>

Internet Explorer Chrome Opera Safari Firefox Android iOS
9.0+ 8.0+ 9.2+ 5.0+ 4.0+ 2.1+ 3.0+

Специфікація

HTML:3.24.015.0XHTML:1.01.1

Опис

Містить опис для тегу <figure>. Тег <figcaption> повинен бути першим або останнім елементом в групі.

Синтаксис

<figure>
 <figcaption>Опис</figcaption>
</figure>

Атрибути

Немає.

Закриваючий тег

Обов'язковий.

Приклад

HTML5IE9CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег FIGCAPTION</title>
  <script>
   document.createElement('figure');
   document.createElement('figcaption');
  </script>
  <style>
   figure {
    background: #d9dabb; /* Колір фону */
    display: block; /* Блочний елемент */
    width: 150px; /* Ширина */
    height: 190px; /* Висота */
    float: left; /* Блоки вирівнюються горизонтально */
    margin: 0 10px 10px 0; /* Відступи */
    text-align: center; /* Вирівнювання по центру */
   }
   figure img {
    border: 2px solid #8b8e4b; /* Параметри рамки */
   }
   figure p {
    margin-bottom: 0; /* Відступ знизу */
   }
  </style>
 </head>
 <body>
  <article>
   <figure>
    <p><img src="images/thumb3.jpg" alt=""></p>
    <figcaption>Купецький клуб</figcaption>
   </figure>
   <figure>
    <p><img src="images/thumb4.jpg" alt=""></p>
    <figcaption>Пам'ятник Св. Володимиру</figcaption>
   </figure>
 </article>
 </body>
</html>

Результат даного прикладу показано на рис. 1.

Браузери

Internet Explorer до версії 8.0 включно ігнорує тег <figcaption>, але відображає його вміст. Також у цьому браузері будь-які стилі не застосовуються до елементу, поки він не створений через скрипт, як показано в прикладі.

Firefox повністю підтримує цей тег починаючи з версії 4.0, але версії 3.0 і старші також правильно відображають вміст тегу.

Часті запитання

  • Q: Як використовувати тег <figcaption> в html?

    A: Тег <figcaption> використовується для визначення підпису до зображення, таблиці або іншого контенту у контейнері <figure>.

  • Q: Чому потрібно використовувати тег <figcaption>?

    A: Тег <figcaption> допомагає структурувати вміст веб-сторінки, надаючи підписи до важливого контенту.

  • Q: Які елементи можна обгортати тегом <figcaption>?

    A: Тег <figcaption> можна використовувати для обгортання підписів до зображень, таблиць, діаграм, відео та іншого контенту.

  • Q: Чи можна використовувати тег <figcaption> без контейнера <figure>?

    A: Тег <figcaption> повинен використовуватись всередині контейнера <figure>, оскільки сам по собі він не має семантичного значення.

  • Q: Як стилізувати тег <figcaption> за допомогою CSS?

    A: Тег <figcaption> можна стилізувати, використовуючи CSS властивості, такі як font-size, color, text-align тощо.