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

    HTML

    <figure>, <figcaption>

    Оформляет изображения с подписью.

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

    1. Кратко
    2. Пример
    3. Как понять
    4. Как пишется
    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>.

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