<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>  <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>, если он есть, обязательно должен быть первым или последним потомком элемента <figure>.