Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. HTML
Webdesign

Быстрая Подсказка: Возьмите Ваш Код Внутрь Элемента “figure”

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Strange and Unusual HTML.
Build a Custom HTML5 Video Player
Quick Tip: Remember to Style Your ALT Text

Russian (Pусский) translation by Narine Hovhannisyan (you can also view the original English article)

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

Этот урок для начинающих, но он также может быть напоминанием для остальных.

Типичное Использование Тега <figure>

Давайте сначала посмотрим, что говорит HTML5 Doctor по этому поводу:

Элемент "figure" представляет собой блок содержимого, необязательно с подписью, который является самостоятельным, к которому относятся как к отдельному от основного потока документа блоку, и который может быть отделен от основного потока документа без воздействия на его значение. - Richard Clark

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

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

Определение Структуры Страницы

Элемент figure является секционным корнем, это означает, что он эффективно изолирует свое содержимое от структуры своего предка. Содержимое figure не способствует результату документа. Он ведет себя как структурный элемент страницы и поэтому может содержать в себе свои собственные заголовки, начиная с <h1> и вниз по иерархии <h2><h3> и так далее, но это не имеет никакого отношения к иерархии извне:

sectioning root
Иерархия в figure не имеет никакого отношения к результату своего предка.

Такие элементы, как этот используются для введения внешнего содержимового в документе, как цитата, например. <fieldset> другой пример элемента секционного корня.

Изображения

Вот типичный пример того, как тег figure может быть использован для отображения изображения.

Вы, возможно, думаете, "Зачем брать тег "img" в дополнительный элемент?" Это справедливый вопрос, но он начинает иметь смысл как только вы осознаете, что <figure> может содержать в себе более чем один дочерний элемент как подпись.

Есть также тег и для figure caption, или скорее, figcaption. Принимая это во внимание, вы сможете использовать его в следующем порядке.

Многочисленные Изображения

Использование только серии элементов img для отображения изображений вместе работает отлично, хотя каждый отдельный рисунок будет отдельным блоком кода, совершенно не связанным с другими. В случаях, когда изображения имеют какую-то связь друг с другом, на помощь приходит figure. Эти три изображения связаны между собой и совместно используют одно резюме в figcaption.

Использование <figure> для Кодовых Блоков

Талант элемента figure на группировании элементов с общой тематикой не заканчивается. Возможно вы хотите сгруппировать код вместе с подписью, для этого вы можете использовать figure и figcaption следующим образом:

figure может быть использован таким образом вместе с code, pre, и samp, делая группировку кодовых блоков легче.

Подводя Итог

Вот и все! Вы узнали, как использовать элемент figure вместе с figcaption и другие элементы для группировки нескольких элементов вместе. Как вы используете элемент figure на данный момент? Будет ли это изменение в результате прочтения этой Быстрой Подсказки? Расскажите нам в комментариях!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.