Елементи figure і figcaption

Попередня ◈ Наступна

У звичайних друкованих виданнях, таких як книги і журнали, зображення, таблиці або приклади коду зазвичай супроводжуються підписом. До сих пір у нас не було можливості семантично виділяти такий тип вмісту безпосередньо в HTML, замість того щоб вдаватися до імен класів СSS. HTML5 сподівається виправити цю проблему за допомогою нових елементів:

і
. Давайте розберемося!

елемент

Передбачається, що елемент

буде використовуватися в поєднанні з елементом
для того, щоб виділяти діаграми, ілюстрації, фотографії та приклади коду (крім іншого). Ось що говориться про
в специфікації:

елемент

являє собою фрагмент незалежного вмісту, зовсім необов'язково з підписом, який як правило відноситься до окремого елементу з основного вмісту документа, і може бути видалений з документа без шкоди його змістом.

елемент

Цей елемент став приводом серйозних суперечок. Специфікація спочатку пропонувала пристосувати для цих цілей елемент . замість того, щоб вигадувати новий елемент. Були й інші пропозиції, що включали

і навіть заголовки

-

. семантика елемента змінилася. і тому ми почали використовувати комбінацію
і
всередині
за пропозицією Джеремі. Але більшість цих ідей були відхилені через відсутність зворотної сумісності для CSS-оформлення.

Наші постійні Новомосковсктелі знають, що недавно був представлений новий елемент

. Хто знає, чи приживеться він, а поки давайте дізнаємося, що про нього говорить специфікація:

елемент

являє собою заголовок або опис для
.

елемент

є необов'язковим і може з'являтися до або після вмісту всередині
. Тільки один елемент
може бути поміщений в
. хоча сам елемент
може містити кілька дочірніх елементів (наприклад, або ).

Використання
і

Отже, ми дізналися, що про ці елементи йдеться в специфікації. Як же їх використовувати? Давайте розглянемо це на прикладах.

для зображення

Зображення в елементі

без підпису:

Елементи figure і figcaption

Ось код для цього:

із зображенням і підписом

Зображення всередині елемента

з пояснювальним підписом:

Елементи figure і figcaption
Нахабна макака з Борнео. Фото Річарда Кларка

І код, який ми використовували:

з декількома зображеннями

Розміщення декількох зображень всередині одного елемента

із загальною підписом:

Елементи figure і figcaption
Елементи figure і figcaption
Елементи figure і figcaption
Зліва направо: кукабара, пелікан та багатобарвний лорикет. Фотографії Річарда Кларка

з блоком коду

елемент

може бути також використаний для прикладів коду:

Використання елемента навколо посилання на ліцензію Creative Commons з rel = "license".

Нижче наведено код для цього:

відмінності між
і

Ми вже говорили про елемент