<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>.