/ ↲
    Расширенный поиск

    HTML

    <figure>, <figcaption>

    Добавляем изображение с подписью.

    Время чтения: меньше 5 мин

    Кратко

    Скопировано

    Элемент <figure> используется для вёрстки иллюстраций, изображений или другого автономного содержимого, которое может иметь поясняющую подпись в виде тега <figcaption>.

    Стена с тремя картинами в стиле К. Малевича: «Оранжевый квадрат», «Оранжевый крест и «Оранжевый круг» — и подписями к ним
    Пример использования <figure> и <figcaption>.

    Пример

    Скопировано
            
          
          <figure>  <img src="elephant-sunset.jpg"      alt="Взрослый африканский слон стоит на фоне заката и задумчиво смотрит в      камеру.">  <figcaption>Слон на фоне заката</figcaption></figure>
          <figure>
  <img src="elephant-sunset.jpg"
      alt="Взрослый африканский слон стоит на фоне заката и задумчиво смотрит в
      камеру.">
  <figcaption>Слон на фоне заката</figcaption>
</figure>

    Как понять

    Скопировано

    Обычно тегом <figure> верстают изображение, иллюстрацию, кусок кода и тому подобное, на которые будут ссылаться из основного содержимого документа. При этом <figure> вместе со всем содержимым (картинкой, подписью) может быть перенесён в другую часть документа без нарушения целостности потока документа.

    Как пишется

    Скопировано

    Только изображение:

            
          
          <figure>  <img src="/favicon144.png" alt="Красивое лого"></figure>
          <figure>
  <img src="/favicon144.png" alt="Красивое лого">
</figure>

    Изображение с подписью:

            
          
          <figure>  <img src="/favicon144.png" alt="Красивое лого">  <figcaption>Супер-логотип</figcaption></figure>
          <figure>
  <img src="/favicon144.png" alt="Красивое лого">
  <figcaption>Супер-логотип</figcaption>
</figure>

    Подпись может быть с уточнением:

            
          
          <figure>  <img  src="/favicon144.png" alt="Красивое лого">  <figcaption>    <p>Новый красивый логотип</p>    <p>Автор: Дока Дог</p>  </figcaption></figure>
          <figure>
  <img  src="/favicon144.png" alt="Красивое лого">
  <figcaption>
    <p>Новый красивый логотип</p>
    <p>Автор: Дока Дог</p>
  </figcaption>
</figure>

    Несколько изображений с общей подписью:

            
          
          <figure>  <img src="/favicon144.png" alt="Лого в 1819">  <img src="/favicon145.png" alt="Лого в 1919">  <img src="/favicon146.png" alt="Лого в 2019">  <figcaption>Как изменялся логотип компании.</figcaption></figure>
          <figure>
  <img src="/favicon144.png" alt="Лого в 1819">
  <img src="/favicon145.png" alt="Лого в 1919">
  <img src="/favicon146.png" alt="Лого в 2019">
  <figcaption>Как изменялся логотип компании.</figcaption>
</figure>

    Фрагменты кода:

            
          
          <figure>  <figcaption>    Получаем данные о текущем URL из свойства <code>location</code>.  </figcaption>  <pre>    function LocationExample() {    console.log(`Protocol: ${location.protocol}`);    console.log(`Host: ${location.host}`);    console.log(`Path: ${location.pathname}`);    console.log(`Hash: ${location.hash}`);    }  </pre></figure>
          <figure>
  <figcaption>
    Получаем данные о текущем URL из свойства <code>location</code>.
  </figcaption>
  <pre>
    function LocationExample() {
    console.log(`Protocol: ${location.protocol}`);
    console.log(`Host: ${location.host}`);
    console.log(`Path: ${location.pathname}`);
    console.log(`Hash: ${location.hash}`);
    }
  </pre>
</figure>

    Подсказки

    Скопировано

    💡 Если содержимое элемента на странице является автономным (даже в отрыве от основного контента будет иметь смысл) и имеет подпись, то почти наверняка можно верстать его тегом <figure>. Самыми яркими примерами такого содержимого могут быть:

    • картинка либо другое медиасодержимое с подписью;
    • фрагменты кода с пояснением;
    • цитата с указанием автора;
    • отрывок стихотворения с указанием автора и т. п.

    💡 Разрешено использовать только один тег <figcaption> внутри <figure>.

    💡 Подпись к картинке из <figcaption> должна отличаться от описания из alt.

    💡 Элемент <figcaption>, если он есть, обязательно должен быть первым или последним потомком элемента <figure>.

    💡 Лучше не вкладывать внутрь <figure> тег для цитат <blockquote>, хотя спецификация это не запрещает. В этом случае скринридеры будут слишком назойливо озвучивать все роли и повторять несколько раз подпись к цитате, если она завёрнута в <figcaption>.

    Читайте также