Тег FIGURE

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

Изображения и мультимедиа

Синтаксис¶

Закрывающий тег обязателен.

Атрибуты¶

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

Описание и примеры¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

 html> head> meta charset="utf-8" /> 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> 

Источник

: Элемент иллюстрации с необязательной подписью

HTML-элемент (Иллюстрация с необязательной подписью) представляет самостоятельный контент, часто с подписью (заголовком), которая указывается с помощью элемента ( ). Диаграмма и её подпись представляет собой единое целое.

Интерактивный пример

Атрибуты

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

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

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

Примеры

Иллюстрации

figure> img src="https://developer.mozilla.org/static/img/favicon144.png" alt="The beautiful MDN logo." /> figure> figure> img src="https://developer.mozilla.org/static/img/favicon144.png" alt="The beautiful MDN logo." /> figcaption>MDN Logofigcaption> figure> 

Фрагменты кода

figure> figcaption>Get browser details using code>navigatorcode>.figcaption> pre> function NavigatorExample() < var txt; txt = "Browser CodeName: " + navigator.appCodeName + "; "; txt+= "Browser Name: " + navigator.appName + "; "; txt+= "Browser Version: " + navigator.appVersion + "; "; txt+= "Cookies Enabled: " + navigator.cookieEnabled + "; "; txt+= "Platform: " + navigator.platform + "; "; txt+= "User-agent header: " + navigator.userAgent + "; "; console.log("NavigatorExample", txt); >pre> figure> 

Цитирования

figure> figcaption>cite>Edsger Dijkstra:cite>figcaption> blockquote> If debugging is the process of removing software bugs, then programming must be the process of putting them in. blockquote> figure> 

«Если отладка — процесс удаления ошибок, то программирование должно быть процессом их внесения», — Эдсгер Дейкстра.

Стихи

figure> p style="white-space:pre"> Bid me discourse, I will enchant thine ear, Or like a fairy trip upon the green, Or, like a nymph, with long dishevell'd hair, Dance on the sands, and yet no footing seen: Love is a spirit all compact of fire, Not gross to sink, but light, and will aspire. p> figcaption>cite>Venus and Adoniscite>, by William Shakespearefigcaption> figure> 

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

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

BCD tables only load in the browser

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

Found a content problem with this page?

This page was last modified on 4 мар. 2023 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

Figure тег в html

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

Синтаксис

Атрибуты

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

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

Figure тег в html

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

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

Показ изображения с подписью:

Вставка видео с описанием:

Отображение графиков и диаграмм:

Показ музыкальных композиций с информацией об исполнителе:

 
 
 // Код на языке JavaScript function sayHello()
 
 
 
Группировка картинок в галерею:
 
 
  
 
  
 
 
Показ таблицы с описанием:
 
Для чего использовать тег
 
 
Сгруппировать изображения или другой мультимедиа контент с его описанием.
 
Указать связь между изображением и его описанием, которое представляет тег .
 
Создать контейнер, который можно стилизовать с помощью CSS, например, для добавления рамки вокруг изображения.
 
Улучшить поисковую оптимизацию (SEO), так как является семантическим элементом.
 
Улучшить доступность контента для пользователей, использующих скринридеры или другие вспомогательные технологии, поскольку предоставляет ясную связь между контентом и его описанием.
 
 
Глобальные атрибуты
 
Нюансы
 
🔠 Другие теги для создания текстовых блоков
 
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
 
Источник
 
Figure тег в html
 
Оформляет изображения с подписью.
 
Время чтения: меньше 5 мин
 
Обновлено 8 сентября 2022
 
Кратко
 
Скопировать ссылку "Кратко" Скопировано
 
Элемент используется для вёрстки иллюстраций, изображений или другого автономного содержимого, которое может иметь поясняющую подпись в виде тега .
 
 
 
Пример
 
Скопировать ссылку "Пример" Скопировано
 
    alt="Слон на фоне заката">   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>    Скопировать Скопировано Не удалось скопировать   
 
     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>    Скопировать Скопировано Не удалось скопировать   
 
Подсказки
 
Скопировать ссылку "Подсказки" Скопировано
 
💡 Если содержимое элемента на странице является автономным (даже в отрыве от основного контента будет иметь смысл) и имеет подпись, то почти наверняка можно верстать его тегом . Самыми яркими примерами такого содержимого могут быть:
 
 
картинка либо другое медиасодержимое с подписью;
 
фрагменты кода с пояснением;
 
цитата с указанием автора;
 
отрывок стихотворения с указанием автора и т.п.
 
 
💡 Разрешено использовать только один тег внутри .
 
💡 Элемент , если он есть, обязательно должен быть первым или последним потомком элемента .
 
Источник
 
Читайте также:  Информация внутри исключения java