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

Давайте рассмотрим, как можно использовать эти теги на практике:

Пример использования тегов <figure> и <figcaption>

Предположим, у вас есть изображение, на котором изображен красивый пейзаж. Вы можете использовать следующий код:

<figure>
    <img src="paysage.jpg" alt="Красивый пейзаж">
    <figcaption>Это пейзаж, который я сфотографировал во время поездки.</figcaption>
</figure>

В этом примере:

• <img> — это тег, который загружает изображение. Атрибут src указывает на путь к файлу изображения, а атрибут alt содержит текстовое описание изображения для экранных считывателей и случаев, когда изображение не может быть загружено.
• <figcaption> — это тег, который содержит подпись к изображению. Он обычно располагается под изображением и является частью элемента <figure>.

Преимущества использования тегов <figure> и <figcaption>

Использование этих тегов дает несколько преимуществ:

• Семантическая структура: Использование <figure> и <figcaption> позволяет лучше структурировать ваш HTML-код и делает его более понятным для поисковых систем и доступными для пользователей с ограниченными возможностями.
• Улучшение доступности: Атрибут alt для изображений обеспечивает доступность контента для пользователей, использующих экранные считыватели.
• Стилизация: Эти теги легко стилизовать с помощью CSS, что позволяет вам настраивать внешний вид изображений и их подписей.

Пример с несколькими изображениями

Вы также можете использовать несколько изображений с подписями в одном блоке:

<figure>
    <img src="image1.jpg" alt="Изображение 1">
    <figcaption>Подпись к изображению 1.</figcaption>
</figure>

<figure>
    <img src="image2.jpg" alt="Изображение 2">
    <figcaption>Подпись к изображению 2.</figcaption>
</figure>

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

Стилизация изображений и подписей с помощью CSS

После того как вы создали структуру с помощью тегов <figure> и <figcaption>, вы можете добавить стили с помощью CSS для улучшения внешнего вида.

figure {
    margin: 20px;
    text-align: center;
}

figcaption {
    font-style: italic;
    font-size: 14px;
    color: #555;
}

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

Заключение

Использование тегов <figure> и <figcaption> является лучшим способом добавления изображений с подписями на веб-страницу. Это не только делает ваш код более семантически правильным, но и улучшает доступность и внешний вид вашего контента.

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