Елементи figure та figcaption

Ричард Кларк

Оригінал: http://html5doctor.com/the-figure-figcaption-elements/

Переклад: Влад Мержевич

У традиційних друкованих матеріалах, таких як книги та журнали, зображення, графіка або коди супроводжуються заголовками. До цього часу нам не було можливості семантично верстати такий контент безпосередньо в HTML, замість використання CSS класів. HTML5 сподівається вирішити цю проблему шляхом введення елементів <figure> та <figcaption>. Давайте розберемося з ними!

Елемент <figure>

Елемент <figure> використовується разом з <figcaption> для розмітки діаграм, ілюстрацій, фотографій, прикладів коду та інших речей. Ось що говорить специфікація про <figure>.

Елемент figure представляє собою самодостатній блок контенту з можливим заголовком, на який, як правило, посилаються з основного потоку документу. Цей блок може бути переміщений з основного потоку документу без втрати загального змісту документу.

Специфікація W3C

Елемент <figcaption>

Елемент <figcaption> був предметом багатьох дискусій. У специфікації спочатку хотіли змінити <legend>, а не вводити новий елемент. Інші пропозиції включали <label>, <caption>, <p> або <h1>...<h6>. <legend> був змінений, а потім за пропозицією Джеремі всередині <figure> використовували комбінацію <dt> та <dd>. Більшість цих пропозицій було відхилено через відсутність зворотної сумісності для управління стилями через CSS.

Постійні читачі вже знають, що новий елемент був представлений недавно під назвою <figcaption>. Чи приживеться цей елемент - питання, але ось що зараз говорить специфікація про <figcaption>:

Елемент figcaption представляє собою заголовок або легенду для figure.

W3C Специфікація

Елемент <figcaption> не є обов'язковим і додається до або після вмісту всередині <figure>. Всередині одного <figure> може бути лише один <figcaption>, при цьому можна додавати багато інших дочірніх елементів (наприклад, <img> або <code>).

Використання <figure> та <figcaption>

Ми дізнались, що говорить специфікація щодо цих елементів. Але як їх використовувати? Подивимось на кілька прикладів.

<figure> з зображенням

Зображення без заголовка всередині елемента <figure>.

Вот код для цього.

<figure>
  <img src="/orang-utan.jpg" alt="Дитина орангутанга тримається за вервту">
</figure>

<figure> з зображенням та заголовком

Зображення всередині елемента <figure> з пояснюючим заголовком.

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

<figure>
  <img src="/macaque.jpg" alt="Макака на дереві">
  <figcaption>Нахабна макака. Річка Нижня Кінтаганбан, Борнео.  Джерело: 
  <a href="http://www.flickr.com/photos/rclark/102352241/in/set-72057594082373448/">Річард Кларк</a></figcaption>
</figure>

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

Декілька зображень всередині одного <figure> з єдиною заголовоком.

Код.

<figure>
  <img src="/kookaburra.jpg" alt="Кукабурра">
  <img src="/pelican.jpg" alt="Пелікан на пляжі">
  <img src="/lorikeet.jpg" alt="Нахабно дивлячийся багатобарвний лорікет">
  <figcaption>Австралійські птахи. Зліва направо: кукабурра, пелікан та багатобарвний лорікет. 
  Джерело: <a href="http://www.flickr.com/photos/rclark/">Річард Кларк</a></figcaption>
</figure>

<figure> з блоком коду

Елемент <figure> також може використовуватися для прикладів коду.

І код для цього.

<figure>
  <blockquote><p><code>&lt;small&gt;&lt;a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/"&gt;Creative 
   Commons Attribution Share-alike license&lt;/a&gt;&lt;/small&gt;</code></p></blockquote>
  <figcaption>Використовуйте <code>&lt;small&gt;</code> навколо посилання
  <a href="http://creativecommons.org/choose/"title="Choose a License">Creative Commons license</a> 
  з <code>rel="license"</code></figcaption>
</figure>

Відмінність між <figure> та <aside>

Ми розглядали <aside> у попередній статті і важливо відзначити різницю між цими двома елементами. Обираючи між <figure> та <aside>, ви повинні запитати себе, чи важливий вміст для розуміння розділу.

  • Якщо вміст просто пов'язаний один з одним і не є важливим, використовуйте <aside>.
  • Якщо вміст має важливе значення, але його позиція в потоці документа не є важливою, використовуйте <figure>.

З урахуванням цього, якщо положення елемента пов'язано з попереднім і наступним вмістом, то скористайтеся більш підходящим елементом, наприклад, <div>, добре знайомим <img>, <blockquote> і, можливо, навіть <canvas> залежно від його вмісту.

Не зупинятися на досягнутому!

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

Проте використання елементу <figure> не завжди є доцільним. Наприклад, графічний банер не повинен бути верстано з <figure>. Замість цього просто скористайтеся елементом <img>.

Резюме

Як ми показали у цій статті, у елемента <figure> є багато можливостей, пам'ятайте, що це найбільш підходящий елемент для роботи. І ви вже використовуєте його у всіх своїх макетах, чи не так?

зображення

Часті запитання