Тег figcaption: Тег | htmlbook.ru – | HTML | WebReference

Leave a Comment / Разное / By /

| HTML | WebReference

Содержит описание для элемента <figure>. <figcaption> (от англ. figure caption — подпись к рисунку) должен быть первым или последним элементом в группе.

Синтаксис

<figure>
 <figcaption>Описание</figcaption>
</figure>

Закрывающий тег

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>FIGCAPTION</title>
  <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="image/thumb3.jpg" alt=""></p>
    <figcaption>Купеческий клуб</figcaption>
   </figure>
   <figure>
    <p><img src="image/thumb4.jpg" alt=""></p>
    <figcaption>Памятник Св. Владимиру</figcaption>
   </figure>
 </article>
 </body>
</html>

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

Использование figcaption

Рис. 1. Использование <figcaption>

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

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

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.

×

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — элемент полностью поддерживается браузером;
  •  — элемент браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

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

×

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 09.10.2018

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

| Справочник HTML

Элемент <figcaption> (от англ. «figure caption» ‒ «подпись к фигуре») определяет заголовок или подпись, связанные с контентом, размещенным в элементе <figure>, который является его непосредственным родительским элементом. Он должен располагаться в качестве первого или последнего дочернего элемента внутри <figure>.

Тег <figure> применяется для обозначения контента, иллюстрирующего или поддерживающего определенную идею текста. Тег <figure> может содержать изображение, видеоролик, схему, фрагмент кода, диаграмму, таблицу — почти все, что может встретиться в потоке веб-контента и должно восприниматься как автономная единица.

Примечание: Элемент <figcaption> является необязательным, если он не указан, то контент элемента <figure> просто не будет иметь заголовка или подписи.

Синтаксис

<figure>
  <figcaption> ... </figcaption>
  ...
</figure>

Закрывающий тег

Обязателен.

Атрибуты

Для этого элемента доступны глобальные атрибуты и события.

Стилизация по умолчанию

Большинство браузеров отобразит элемент <figcaption> со следующими значениями CSS по умолчанию:

figcaption { 
    display: block;
}

Различия между HTML 4.01 и HTML5

Тег <figcaption> является новым в HTML5.

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

Элемент <figcaption>

Используем элемент <figcaption> для разметки фотографии с подписью:

Пример HTML:

Попробуй сам 


<figure>
  <img src="ship320.jpg" alt="Корабль">
  <figcaption>Рис1. - Прогулочный корабль.</figcaption>
</figure>

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

Поддержка браузерами

Элемент
<figcaption> 9+ 5+ 11.10+ Да 5.1+ 4+
Элемент
<figcaption> 2.2+ 4+ 11+ 5+

: Элемент подписи иллюстрации — Веб-технологии для разработчиков

HTML-элемент

<figcaption> или элемент подписи иллюстрации представляет собой подпись (заголовок) или легенду, описывающую остальную часть содержимого родистельского элемента <figure>.

Источник для этого интерактивного пример хранится в GitHub репозитории. Если вы хотите внести свой вклад, ознакомьтесь с https://github.com/mdn/interactive-examples и отправьте нам pull request.

Атрибуты

Этот элемент принимает только глобальные атрибуты.

Примеры

Для примеров <figcaption> смотрите <figure>.

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

Поддержка браузерами

Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад, ознакомьтесь с https://github.com/mdn/browser-compat-data и отправьте нам pull request. Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdge
Firefox		Internet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
figcaptionChrome Полная поддержка 8Edge Полная поддержка 12Firefox Полная поддержка 4IE Полная поддержка 9Opera Полная поддержка 11Safari Полная поддержка 5.1WebView Android
Полная поддержка Да		Chrome Android Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android Полная поддержка 11Safari iOS Полная поддержка 5.1Samsung Internet Android Полная поддержка Да

Легенда

Полная поддержка  
Полная поддержка

Смотрите также

| Справочник HTML

Элемент <caption> (от англ. «caption» ‒ «подпись, надпись») создаёт заголовок к таблице и может размещаться только внутри контейнера <table>, причём сразу после открывающего тега. Такой заголовок представляет собой текст, по умолчанию отображаемый перед таблицей и описывающий её содержание.

Синтаксис

<table>
<caption>название таблицы</caption>
...
</table>

Закрывающий тег

Обязателен.

Атрибуты

alignУстарел в HTML5
Задает выравнивание заголовка по горизонтали.
left — заголовок располагается сверху таблицы и выравнивается по левому краю
right — заголовок располагается сверху таблицы и выравнивается по правому краю
top — заголовок выводится над таблицей и выравнивается по центру (значение по-умолчанию)
bottom — заголовок размещается внизу таблицы по ее центру.

Для этого элемента доступны глобальные атрибуты

и события.

Совет: По умолчанию заголовок таблицы будет выровнен по центру. Тем не менее, для пользовательского выравнивания и размещения пояснительного заголовка таблицы можно использовать свойства CSS text-align и caption-side.

Стилизация по умолчанию

Большинство браузеров отобразит элемент <caption> со следующими значениями CSS по умолчанию:

caption { 
    display: table-caption;
    text-align: center;
}

Различия между HTML 4.01 и HTML5

В HTML5 атрибут align не поддерживается.

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

Элемент <caption>

Пример HTML:

Попробуй сам 
<table>
  <caption>Заголовок к таблице</caption>
  <tr>
    <th colspan="4">Заголовок</th>
  </tr>
  <tr>
    <td>Ячейка (1,1)</td>
    <td>Ячейка (1,2)</td>
    <td>Ячейка (1,3)</td>
    <td>Ячейка (1,4)</td>
  </tr>
  <tr>
    <td>Ячейка (2,1)</td>
    <td>Ячейка (2,2)</td>
    <td>Ячейка (2,3)</td>
    <td>Ячейка (2,4)</td>
  </tr>
</table>

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

Поддержка браузерами

Элемент
<caption> 3+ 1+ 7+ 1+ 1+ 1+
Элемент
<caption> 1+ 1+ 6+ 1+

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *