От автора: семантические теги figure и figcaption часто используются в паре. Если вы до сих пор не читали документацию по этим тегам, уже пользовались ими в проектах или понятия не имеете, зачем они нужны, в этой статье я привел несколько советов, которые помогут вам правильно применять эти элементы.
Тег figure обычно используется для вставки изображений:
|
1 2 3 |
<figure> <img src="dog.jpg" alt="Maltese Terrier"> </figure> |
Тег figure – замкнутая единица контента. Если вы переместите элемент чуть ниже на странице или в самый низ, это никак не повлияет на его значение в документе. Поэтому нужно помнить, что не все изображения можно указывать в теге figure.
Несколько изображений в теге figure
Если изображения связаны между собой и подаются в общем контексте, то в тег figure можно прописать несколько img.
|
1 2 3 4 5 |
<figure> <img src="dog1.jpg" alt="Maltese Terrier"> <img src="dog2.jpg" alt="Black Labrador"> <img src="dog3.jpg" alt="Golden Retriever"> </figure> |
Figure можно использовать и с другими тегами
Тег figure не ограничивается только лишь изображениями. Его можно использовать с:
Блоками для кода,
Видео,
Аудиофайлами или
Рекламой.
Пример вставки блока с кодом в тег figure:
|
1 2 3 4 5 6 7 8 9 |
<figure> <pre> p { color: #333; font-family: Helvetica, sans-serif; font-size: 1rem; } |
Вложенность одного figure в другой
Тег figure можно поместить внутрь другого тега figure. В коде ниже для улучшения семантики был добавлен ARIA атрибут role.
|
1 2 3 4 5 6 7 8 9 10 11 |
<figure role="group"> <figcaption>Dog breeds</figcaption> <figure> <img src="dog1.jpg" alt="Maltese Terrier"> <figcaption>Adorable Maltese Terrier</figcaption> </figure> <figure> <img src="dog2.jpg" alt="Black Labrador"> <figcaption>Cute black labrador</figcaption> </figure> </figure> |
Правильное применение figcaption
Тег figcaption представляет собой подпись или легенду к тегу figure. Не всегда тегу figure нужен figcaption. Однако в случаях, когда этот тег необходим, он должен быть первым или последним внутри figure:
|
1 2 3 4 5 6 |
<figure> <figcaption>Three different breeds of dog.</figcaption> <img src="dog1.jpg" alt="Maltese Terrier"> <img src="dog2.jpg" alt="Black Labrador"> <img src="dog3.jpg" alt="Golden Retriever"> </figure> |
Или:
|
1 2 3 4 5 6 |
<figure> <img src="dog1.jpg" alt="Maltese Terrier"> <img src="dog2.jpg" alt="Black Labrador"> <img src="dog3.jpg" alt="Golden Retriever"> <figcaption>Three different breeds of dog.</figcaption> </figure> |
Если нужно добавить больше семантики изображению, можно использовать теги h1 и p.
|
1 2 3 4 5 6 7 |
<figure> <img src="dogs.jpg" alt="Group photo of dogs"> <figcaption> <h2>Puppy School</h2> <p>Championship Class of 2016</p> </figcaption> </figure> |
А вы знаете, как еще можно использовать теги figure и figcaption?
Автор: Georgie Luhur
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.
Комментарии (2)