Используется для группирования любых элементов, например, изображений и подписей к ним.
Синтаксис
Атрибуты
Закрывающий тег
HTML5 IE Cr Op Sa Fx
Тег FIGURE
Софийский собор
Польский костел
Результат данного примера показан на рис. 1.
/>title>FIGUREtitle>style>figurebackground:#5f6a72;/* Цвет фона */padding:10px;/* Поля вокруг */width:150px;/* Ширина */float:left;/* Блоки выстраиваются по горизонтали */margin:010px10px0;/* Отступы */text-align:center;/* Выравнивание по центру */>figcaptioncolor:#fff;/* Цвет текста */>style>head>body>article>figure>p>imgsrc="image/thumb1.jpg"alt=""/>p>figcaption>Софийский соборfigcaption>figure>figure>p>imgsrc="image/thumb2.jpg"alt=""/>p>figcaption>Польский костелfigcaption>figure>article>body>html>
Элемент
Для добавления иллюстраций, графиков, диаграмм, фотографий применяется элемент . Его содержимое не ограничивается изображениями, допустимо вставлять видео, примеры кода, даже текст. Внутри при желании добавляется заголовок с помощью элемента до или после содержимого.
Элемент не должен быть связан с основным текстом, так что если его переместить в другое место, то смысл содержания не потеряется. К примеру, если добавить иллюстрацию, то в тексте на неё можно сослаться как «. изображена на рис. 2». Сам рисунок при этом может располагаться в другом месте, а не только идти сразу же после текста, главное, не забыть его подписать. И, наоборот, неверным шагом будет воспользоваться и сослаться на него как «смотри рисунок ниже». Потому что при перемещении иллюстрации искажается смысл текста.
В примере 1 показано применение для иллюстрации текста.
Пример 1. Использование
Изображения
Зубчатые механизмы используют для изменения параметров вращательного движения, а также для преобразования вращательного движения в поступательное. Зубчатый механизм с круглыми колёсами и реечной передачей, используемый в стрелочных электроприводах железных дорог, показан на рис. 4.
Рис. 4. Зубчатый механизм с круглыми колёсами и реечной передачей
Результат данного примера показан на рис. 1.
Рис. 1. Вид картинки с заголовком
Содержимое выравнивается по левому краю и к нему добавляются небольшие отступы, это заметно по картинке, она отступает немного вправо относительно левого края текста. Для изменения способа выравнивания, например, по центру, в стилях используем свойство text-align .
figure < text-align: center; /* Выравнивание по центру */ >
См. также
Добавление медиа-контента
Подрисуночная подпись
HTML тег
Тег используется для группирования контента, который дополняет или иллюстрирует содержание документа. В теге могут содержаться изображения, диаграммы, иллюстрации, примеры кодов и т.д.
Содержимое тега относится к основному потоку веб-контента, однако воспринимается как автономная единица.
Для добавления подписи или пояснений к содержимому тега используется тег . Тег включается в тег и размещается в качестве первого или последнего дочернего элемента. Если является первым вложенным элементом, то содержимое будет отображаться вверху изображения.
/> 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>
