Figcaption html: : Элемент подписи иллюстрации — HTML

Элементы figure и figcaption — Веб-стандарты

В обычных печатных изданиях, таких как книги и журналы, изображения, таблицы или примеры кода обычно сопровождаются подписью. До сих пор у нас не было возможности семантически выделять такой тип содержимого напрямую в HTML, вместо того чтобы прибегать к именам классов СSS. HTML5 надеется исправить эту проблему с помощью новых элементов: <figure> и <figcaption>. Давайте разберемся!

Элемент

<figure>Скопировать ссылку

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

Элемент <figure> представляет собой фрагмент независимого содержимого, совсем необязательно с подписью, который как правило относится к отдельному элементу из основного содержимого документа, и может быть удалён из документа без ущерба его смыслу. Спецификация W3C

Элемент

<figcaption>Скопировать ссылку

Этот элемент стал поводом серьезных споров. Спецификация изначально предлагала приспособить для этих целей элемент <legend>, вместо того, чтобы придумывать новый элемент. Были и другие предложения, включавшие <label>, <caption>, <p> и даже заголовки с <h2> по <h6>. Семантика элемента <legend> изменилась, и поэтому мы начали использовать комбинацию <dt> и <dd> внутри <figure> по предложению Джереми. Но большинство этих идей были отклонены из-за отсутствия обратной совместимости для CSS-оформления.

Наши постоянные читатели знают, что недавно был представлен новый элемент <figcaption>. Кто знает, приживется ли он, а пока давайте узнаем, что о нём говорит спецификация:

Элемент <figcaption> представляет собой заголовок или описание для <figure>.

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

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

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

<figure> и <figcaption>Скопировать ссылку

Итак, мы узнали, что об этих элементах говорится в спецификации. Как же их использовать? Давайте рассмотрим это на примерах.

<figure> для изображенияСкопировать ссылку

Изображение в элементе <figure> без подписи:

Вот код для этого:

<figure>
    <img src="orang-utan.jpg" alt="Малыш орангутанга свисает с каната.">
</figure>

<figure> с изображением и подписьюСкопировать ссылку

Изображение внутри элемента <figure> с поясняющей подписью:

Наглая макака из Борнео. Фото Ричарда Кларка

И код, который мы использовали:

<figure>
    <img src="macaque.jpg" alt="Макака на дереве.">
    <figcaption>
        Наглая макака из Борнео.
        Фото <a href="…">Ричарда Кларка</a>
    </figcaption>
</figure>

<figure> с несколькими изображениямиСкопировать ссылку

Размещение нескольких изображений внутри одного элемента <figure> с общей подписью:

Слева направо: кукабара, пеликан и многоцветный лорикет. Фотографии Ричарда Кларка

И сам код:

 <figure>
    <img src="kookaburra.jpg" alt="Кукабара.">
    <img src="pelican.jpg" alt="Пеликан на пляже.">
    <img src="lorikeet.jpg" alt="Наглый многоцветный лорикет.">
    <figcaption>
        Слева направо: кукабара, пеликан и многоцветный лорикет.
        Фотографии <a href="…">Ричарда Кларка</a>
    </figcaption>
</figure>

<figure> с блоком кодаСкопировать ссылку

Элемент <figure> может быть также использован для примеров кода:

Creative Commons Attribution Share-alike license

Использование элемента <small> вокруг ссылки на лицензию Creative Commons с rel="license".

Ниже приведен код для этого:

<figure>
    <blockquote>
        <p><code><small>
            <a rel="license" href="…">
                Creative Commons Attribution Share-alike license
            </a>
        </small></code></p>
    </blockquote>
    <figcaption>
        Использование элемента <code>&lt;small&gt;</code>
        вокруг ссылки на лицензию Creative Commons
        с <code>rel="license"</code>.
    </figcaption>
</figure>

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

<figure> и <aside>Скопировать ссылку

Мы уже говорили об элементе <aside> в предыдущей статье, но важно отметить разницу между ними. При выборе между <aside> или <figure>, стоит спросить себя, имеет ли содержимое элемента важное значение для понимания содержимого:

• Если содержимое просто имеет отношение и не является существенным, то используйте <aside>.
• Если содержимое является важным, но его положение в потоке общего содержимого не так важно, используется элемент <figure>.

Обратите внимание, что если положение содержимого в тексте тесно связано с предыдущим и последующим содержимым, следует использовать более подходящие элементы — например, <div>, старый добрый <img>, <blockquote>, или даже <canvas>, в зависимости от типа содержимого.

Не останавливайтесь на достигнутом!Скопировать ссылку

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

Однако использование элемента <figure> не всегда целесообразно. Например, графический баннер не стоит размечать в <figure>. Используйте для этого просто <img>.

ВыводСкопировать ссылку

Как мы продемонстрировали в этой статье, элемент <figure> открывает много возможностей. Только не забудьте убедиться, что он подходит для конкретного случая. Хотя вряд ли вы бездумно относитесь к разметке, так ведь?

: элемент подписи к рисунку. HTML-элемент представляет собой легенду, описывающую остальную часть содержимого его родительского элемента . Этот элемент включает только глобальные атрибуты.

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

Тег <figcaption> в HTML5 позволяет вам вводить текст к изображению, например: <figcaption> Ваш текст здесь </figcaption>. Затем вы можете использовать CSS для размещения текста там, где он должен быть на изображении.

HTML позволяет элементу figcaption быть либо первым,либо последним элементом внутри фигуры,и без каких-либо правил CSS это приведет к тому,что подпись будет находиться сверху или снизу фигуры,соответственно.

Тег <figcaption> определяет заголовок для элемента <figure>. Элемент <figcaption> может быть размещен как первый или последний дочерний элемент элемента <figure>.

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

Try it

Content categories	None.
Permitted content	Flow content.
Tag omission	Нет,и начальная и конечная метки обязательны.
Permitted parents	<figure> элемент; <figcaption> элемент должен быть его первым или последним ребенком.
Неявная роль ARIA	Нет соответствующей роли
Разрешенные роли АРИА	group, none, presentation
DOM interface	HTMLElement

Attributes

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

Examples

Пожалуйста, смотрите страницу <figure> для примеров на <figcaption> .

Specifications

Specification
Стандарт HTML # элемент the-figcaption

Browser compatibility

	Desktop	Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	WebView Android	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet
figcaption	8	12	4	9	11	5. 1	Yes	Yes	4	11	5	Yes

See also

• Элемент <figure> .

---

HTML

• <embed>: элемент Embed External Content

  HTML-элемент <embed> встраивает внешний контент в указанную точку документа.

• <fieldset>: элемент набора полей

  HTML-элемент <fieldset> используется для группировки нескольких элементов управления, а также меток в веб-форме.

• <figure>: Рисунок с дополнительным элементом Caption.

  HTML-элемент <figure> представляет собой автономный контент, потенциально с необязательным заголовком, который указывается с помощью <figcaption> Только этот элемент

• <font>

  Исправлено:Эта функция больше не рекомендуется.

• 1
• …
• 71
• 72
• 73
• 74
• 75
• …
• 258
• Next

Тег HTML5 figcaption — GeeksforGeeks

Улучшить статью

Сохранить статью

• Уровень сложности: Базовый
• Последнее обновление: 23 мар, 2022

Читать

Обсудить

Улучшить статью

Сохранить статью

Тег в HTML используется для установки подписи к элементу рисунка в документе.

Этот тег является новым в HTML5.
 

Синтаксис:  

Example 1: 

HTML

< html >          < Body > < H2 > Geeksforgeeks H2 > 43          < h3 >< figcaption Tag> h3 >          < figure >          < img источник =          alt = "gfglogo" стиль0042 "width:50%" >                   < figcaption >              GeeksforGeeks Logo          figcaption >                   цифра >  0003      body >     html >

Output: 
 

Example 2: 

HTML

< 42 >          < body >              < h2 >GeeksforGeeks h2 >          < h3 >< figcaption > Тег h3 >         < figure >          < img src =          alt = "gfglogo" >          < Figcaption > GFG Logo figcaption >                   figure >          body >   html >

Вывод: 

03

Поддерживаемые браузеры:

• Google Chrome 8. 0
• Edge 12.0
• Internet Explorer 9.0
• Firefox 4.0
• . CSS

  Коллекция бесплатных примеров кода HTML и CSS

  и