Оновлено: 19.05.2025

figure

Frontend HTML Теги figure

<figure>

Використовується для групування будь-яких елементів, наприклад, зображень та підписів до них. <figure> (від англ. figure - малюнок, ілюстрація) не повинен бути пов'язаний безпосередньо з основним вмістом документа, і при його переміщенні в інше місце зміст тексту не повинен змінюватися. Зазвичай застосовується для ілюстрацій, фрагментів коду, схем, графіків, діаграм та інших..

 

 

Синтаксис

<figure>
...
</figure>

 

 

Закриваючий тег

Обов'язковий.
 

 

 

Атрибути

Немає.

 

 

Приклад

<!DOCTYPE html>
<html>
  <head>
   <metacharset="utf-8">
   <title>FIGURE</title>
     <base href="https://assets.ithillel.ua/images/wiki/">
   <style>
    figure {
     background: #5f6a72; /* Background color */
     padding: 10px /* Margins around */
     width: 150px /* Width */
     float: left; /* Blocks line up horizontally */
     margin: 0 10px 10px 0; /* Indentation */
     text-align: center; /* Center alignment */
    }
    figcaption {
     color: #fff; /* Text color */
    }
   </style>
  </head>
  <body>
   <article>
    <figure>
     <p><img src="gallery/thumb1.jpg" alt=""></p>
     <figcaption>Sophia Cathedral</figcaption>
    </figure>
    <figure>
     <p><img src="gallery/thumb2.jpg" alt=""></p>
     <figcaption>Polish Church</figcaption>
    </figure>
   </article>
  </body>
</html>