Figure html что это

Figure html что это

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

Синтаксис

Атрибуты

Пример

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

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

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

Спецификация	Статус
HTML Living Standard	Живой стандарт

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

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

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

Браузеры

9

12

8

11.5

5.1

4

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

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

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

См. также

• Добавление медиа-контента
• Элемент

Figure html что это

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

Синтаксис

Атрибуты

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

HTML5 IE Cr Op Sa Fx

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

/> title>FIGUREtitle> style> figure background: #5f6a72; /* Цвет фона */ padding: 10px; /* Поля вокруг */ width: 150px; /* Ширина */ float: left; /* Блоки выстраиваются по горизонтали */ margin: 0 10px 10px 0; /* Отступы */ text-align: center; /* Выравнивание по центру */ > figcaption color: #fff; /* Цвет текста */ > style> head> body> article> figure> p>img src="image/thumb1.jpg" alt="" />p> figcaption>Софийский соборfigcaption> figure> figure> p>img src="image/thumb2.jpg" alt="" />p> figcaption>Польский костелfigcaption> figure> article> body> html>

Figure html что это

Добавляем изображение с подписью.

Время чтения: меньше 5 мин

Открыть/закрыть навигацию по статье
Контрибьюторы:

• Егор Левченко ,
• Татьяна Фокина

Обновлено 8 сентября 2022

Кратко

Скопировать ссылку «Кратко» Скопировано

Элемент используется для вёрстки иллюстраций, изображений или другого автономного содержимого, которое может иметь поясняющую подпись в виде тега .

Пример

Скопировать ссылку «Пример» Скопировано

    alt block-code__original-line"> камеру.">   figure> img src="elephant-sunset.jpg" alt="Взрослый африканский слон стоит на фоне заката и задумчиво смотрит в камеру."> figcaption>Слон на фоне закатаfigcaption> figure>    Скопировать Скопировано Не удалось скопировать   

Как понять

Скопировать ссылку «Как понять» Скопировано

Обычно тегом верстают изображение, иллюстрацию, кусок кода и тому подобное, на которые будут ссылаться из основного содержимого документа. При этом вместе со всем содержимым (картинкой, подписью) может быть перенесён в другую часть документа без нарушения целостности потока документа.

Как пишется

Скопировать ссылку «Как пишется» Скопировано

     figure> img src="/favicon144.png" alt="Красивое лого"> figure>    Скопировать Скопировано Не удалось скопировать   

Изображение с подписью:

      figure> img src="/favicon144.png" alt="Красивое лого"> figcaption>Супер-логотипfigcaption> figure>    Скопировать Скопировано Не удалось скопировать   

Подпись может быть с уточнением:

     
Новый красивый логотип 
Автор: Дока Дог   figure> img src="/favicon144.png" alt="Красивое лого"> figcaption> p>Новый красивый логотипp> p>Автор: Дока Догp> figcaption> figure>    Скопировать Скопировано Не удалось скопировать   

Несколько изображений с общей подписью:

        figure> img src="/favicon144.png" alt="Лого в 1819"> img src="/favicon145.png" alt="Лого в 1919"> img src="/favicon146.png" alt="Лого в 2019"> figcaption>Как изменялся логотип компании.figcaption> figure>    Скопировать Скопировано Не удалось скопировать   

    Получаем данные о текущем URL из свойства location.   function LocationExample()  console.log(`Protocol: $`); console.log(`Host: $`); console.log(`Path: $`); console.log(`Hash: $`); >   figure> figcaption> Получаем данные о текущем URL из свойства code>locationcode>. figcaption> pre> function LocationExample() < console.log(`Protocol: $`); console.log(`Host: $`); console.log(`Path: $`); console.log(`Hash: $`); > pre> figure>    Скопировать Скопировано Не удалось скопировать   

Подсказки

Скопировать ссылку «Подсказки» Скопировано

�� Если содержимое элемента на странице является автономным (даже в отрыве от основного контента будет иметь смысл) и имеет подпись, то почти наверняка можно верстать его тегом . Самыми яркими примерами такого содержимого могут быть:

• картинка либо другое медиасодержимое с подписью;
• фрагменты кода с пояснением;
• цитата с указанием автора;
• отрывок стихотворения с указанием автора и т. п.

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

�� Подпись к картинке из должна отличаться от описания из alt .

�� Элемент , если он есть, обязательно должен быть первым или последним потомком элемента .

�� Лучше не вкладывать внутрь тег для цитат , хотя спецификация это не запрещает. В этом случае скринридеры будут слишком назойливо озвучивать все роли и повторять несколько раз подпись к цитате, если она завёрнута в .