Справочник · HTML

figure: иллюстрация с подписью

figure собирает картинку, код или схему вместе с подписью. Подпись не заменяет alt.

Как это работает

Внутри обычно img, pre или блок схемы и один figcaption. figcaption может стоять первым или последним. alt описывает сам снимок для тех, кто его не видит. Подпись говорит, зачем он в уроке. Не оборачивай в figure всякую декоративную картинку без подписи и не клади туда целый самостоятельный раздел.

<figure>
  <img src="/images/form.png" alt="Форма с подписью над полем имени">
  <figcaption>Подпись стоит над полем, а не внутри него.</figcaption>
</figure>

Когда использовать

Снимок с пояснением, пример кода с подписью. Иконка в кнопке — не figure.

Частые ошибки

• Подпись продублировала alt слово в слово.
• У картинки пустой смысл и пустой alt.
• В figure оказалась вся статья.