Html figure and figcaption

Эле­мен­ты figure и figcaption

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

Элемент Скопировать ссылку

Предполагается, что элемент будет использоваться в сочетании с элементом для того, чтобы выделять диаграммы, иллюстрации, фотографии и примеры кода (помимо прочего). Вот что говорится о в спецификации:

Элемент представляет собой фрагмент независимого содержимого, совсем необязательно с подписью, который как правило относится к отдельному элементу из основного содержимого документа, и может быть удалён из документа без ущерба его смыслу. Спецификация W3C

Элемент Скопировать ссылку

Этот элемент стал поводом серьезных споров. Спецификация изначально предлагала приспособить для этих целей элемент , вместо того, чтобы придумывать новый элемент. Были и другие предложения, включавшие , ,

и даже заголовки с по . Семантика элемента изменилась, и поэтому мы начали использовать комбинацию и внутри по предложению Джереми. Но большинство этих идей были отклонены из-за отсутствия обратной совместимости для CSS-оформления.

Наши постоянные читатели знают, что недавно был представлен новый элемент . Кто знает, приживется ли он, а пока давайте узнаем, что о нём говорит спецификация:

Элемент является необязательным и может появляться до или после содержимого внутри . Только один элемент может быть помещен в , хотя сам элемент может содержать несколько дочерних элементов (например, или ).

Использование и Скопировать ссылку

Итак, мы узнали, что об этих элементах говорится в спецификации. Как же их использовать? Давайте рассмотрим это на примерах.

для изображения Скопировать ссылку

Изображение в элементе без подписи:

с изображением и подписью Скопировать ссылку

Изображение внутри элемента с поясняющей подписью:

И код, который мы использовали:

с несколькими изображениями Скопировать ссылку

Размещение нескольких изображений внутри одного элемента с общей подписью:

с блоком кода Скопировать ссылку

Элемент может быть также использован для примеров кода:

Ниже приведен код для этого:

 
 
  Creative Commons Attribution Share-alike license 
 
  
 

Различия между и Скопировать ссылку

Мы уже говорили об элементе в предыдущей статье, но важно отметить разницу между ними. При выборе между или , стоит спросить себя, имеет ли содержимое элемента важное значение для понимания содержимого:

• Если содержимое просто имеет отношение и не является существенным, то используйте .
• Если содержимое является важным, но его положение в потоке общего содержимого не так важно, используется элемент .

Обратите внимание, что если положение содержимого в тексте тесно связано с предыдущим и последующим содержимым, следует использовать более подходящие элементы — например, , старый добрый , , или даже , в зависимости от типа содержимого.

Не останавливайтесь на достигнутом! Скопировать ссылку

Не стоит ограничивать использование изображениями и примерами кода. Другим содержимым, подходящим по смыслу для использования в элементе может быть аудио, видео, графики (возможно, с использованием или ), стихи или таблицы со статистикой.

Однако использование элемента не всегда целесообразно. Например, графический баннер не стоит размечать в . Используйте для этого просто .

Вывод Скопировать ссылку

Как мы продемонстрировали в этой статье, элемент открывает много возможностей. Только не забудьте убедиться, что он подходит для конкретного случая. Хотя вряд ли вы бездумно относитесь к разметке, так ведь?

Источник

Элементы figure и figcaption

В традиционных печатных материалах вроде книг и журналов изображения, графики или примеры кода сопровождаются заголовками. До сегодняшнего дня у нас не было способа семантически верстать такого рода контент непосредственно в нашем HTML, вместо использования классов CSS. HTML5 надеется решить эту проблему путём введения элементов и . Давайте разбираться с ними!

Элемент

Элемент используется в сочетании с и предназначен для разметки диаграмм, иллюстраций, фотографий, примеров кода и других вещей. Вот что спецификация говорит о .

Элемент figure представляет собой самодостаточный блок контента с возможным заголовком, на который, как правило, ссылаются из основного потока документа. Этот блок может быть перемещён из основного потока документа без потери общего смысла документа.

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

Элемент

Элемент был предметоммногочисленныхспоров. В спецификации вначале хотели переориентировать , а не вводить новый элемент. Другие предложения включали , ,

или . . был изменён, затем по предложению Джереми внутри использовали комбинацию и . Большинство этих предложений провалилось, поскольку не было обратной совместимости для управления стилями через CSS.

Постоянные читатели уже в курсе, что новый элемент был представлен недавно под именем . Кто знает, приживётся ли этот элемент, но вот что сейчас спецификация говорит о :

Элемент figcaption представляет собой заголовок или легенду для figure.

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

Элемент не обязателен и добавляется до или после содержимого внутри . Только один может находиться внутри , при этом допустимо добавлять множество других дочерних элементов (например, или ).

Использование и

Мы узнали, что спецификация говорит об этих элементах. Но как их использовать? Давайте взглянем на несколько примеров.

с изображением

Изображение без заголовка внутри элемента .

с изображением и заголовком

Изображение внутри элемента с поясняющим заголовком.

И код, который мы использовали.

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

Несколько изображений внутри одного с единым заголовком.

с блоком кода

Элемент может также применяться для примеров кода.

Различие между и

Мы рассмотрели в предыдущей статье и важно отметить различие между двумя этими элементами. Выбирая между и вы должны спрашивать себя, является ли содержание важным для понимания раздела.

• Если содержание просто связано друг с другом и не важно, используйте .
• Если содержание имеет важное значение, но его позиция в потоке документа не важна, используйте .

С учётом этого, если положение элемента связано с предыдущим и последующим содержанием, то воспользуйтесь более подходящим элементом, например, , старым добрым , и, возможно даже, в зависимости от его содержимого.

Не останавливаться на достигнутом!

Нет необходимости ограничивать ваши изображениями и примерами кода. Другое содержимое вполне подходит для использования, включая аудио, видео, графики (возможно, с использованием или ), стихи или таблицы со статистикой.

При этом задействовать элемент не всегда может быть целесообразно. Например, графический баннер не должен верстаться с . Вместо этого просто используйте элемент .

Резюме

Как мы показали в этой статье, у элемента есть множество возможностей, помните, что это наиболее подходящий элемент для работы. И вы уже используете его во всех своих макетах, на так ли?

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Популярные материалы

• Самоучитель HTML4
• Самоучитель CSS
• Как добавить картинку на веб-страницу?
• Спецсимволы
• Структура HTML-кода
• Введение в HTML
• Способы добавления стилей на страницу
• Выравнивание текста
• Якоря
• Как добавить иконку сайта в адресную строку браузера?
• Позиционирование элементов
• Ссылки

Источник

Html figure and figcaption

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

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

Обновлено 8 сентября 2022

Кратко

Скопировать ссылку «Кратко» Скопировано

Элемент используется для вёрстки иллюстраций, изображений или другого автономного содержимого, которое может иметь поясняющую подпись в виде тега .

Пример

Скопировать ссылку «Пример» Скопировано

    alt="Слон на фоне заката">   figure> img src="elephant-sunset.jpg" alt="Слон на фоне заката"> figcaption>Слон на фоне закатаfigcaption> figure>    Скопировать Скопировано Не удалось скопировать   

Как понять

Скопировать ссылку «Как понять» Скопировано

Обычно тегом верстают изображение, иллюстрацию, кусок кода и тому подобное, на которые будут ссылаться из основного содержимого документа. При этом вместе со всем содержимым (картинкой, подписью) может быть перенесён в другую часть документа без нарушения целостности потока документа.

Как пишется

Скопировать ссылку «Как пишется» Скопировано

     figure> img src="/favicon144.png" alt="Красивое лого"> figure>    Скопировать Скопировано Не удалось скопировать   

      figure> img src="/favicon144.png" alt="Красивое лого"> figcaption>Супер-логотипfigcaption> figure>    Скопировать Скопировано Не удалось скопировать   

Подпись может быть с уточнением:

     
Новый красивый логотип 
Автор: Дока Дог   figure> img src="/favicon144.png" alt="Красивое лого"> figcaption> p>Новый красивый логотипp> p>Автор: Дока Догp> figcaption> figure>    Скопировать Скопировано Не удалось скопировать   

     function LocationExample()  console.log(`Protocol: $`); console.log(`Host: $`); console.log(`Path: $`); console.log(`Hash: $`); >   figure> figcaption>Получаем данные о текущем URL из свойства code>locationcode>.figcaption> pre> function LocationExample() < console.log(`Protocol: $`); console.log(`Host: $`); console.log(`Path: $`); console.log(`Hash: $`); > pre> figure>    Скопировать Скопировано Не удалось скопировать   

Подсказки

Скопировать ссылку «Подсказки» Скопировано

💡 Если содержимое элемента на странице является автономным (даже в отрыве от основного контента будет иметь смысл) и имеет подпись, то почти наверняка можно верстать его тегом . Самыми яркими примерами такого содержимого могут быть:

• картинка либо другое медиасодержимое с подписью;
• фрагменты кода с пояснением;
• цитата с указанием автора;
• отрывок стихотворения с указанием автора и т.п.

💡 Разрешено использовать только один тег внутри .

💡 Элемент , если он есть, обязательно должен быть первым или последним потомком элемента .

Источник

: The Figure with Optional Caption element

The HTML element represents self-contained content, potentially with an optional caption, which is specified using the element. The figure, its caption, and its contents are referenced as a single unit.

Try it

Attributes

This element only includes the global attributes.

Usage notes

• Usually a is an image, illustration, diagram, code snippet, etc., that is referenced in the main flow of a document, but that can be moved to another part of the document or to an appendix without affecting the main flow.
• A caption can be associated with the element by inserting a inside it (as the first or the last child). The first element found in the figure is presented as the figure’s caption.

Examples

Images

figure> img src="favicon-192x192.png" alt="The beautiful MDN logo." /> figure> figure> img src="favicon-192x192.png" alt="The beautiful MDN logo." /> figcaption>MDN Logofigcaption> figure> 

Result

Code snippets

figure> figcaption>Get browser details using code>navigatorcode>.figcaption> pre> function NavigatorExample() < var txt; txt = "Browser CodeName: " + navigator.appCodeName + "; "; txt+= "Browser Name: " + navigator.appName + "; "; txt+= "Browser Version: " + navigator.appVersion + "; "; txt+= "Cookies Enabled: " + navigator.cookieEnabled + "; "; txt+= "Platform: " + navigator.platform + "; "; txt+= "User-agent header: " + navigator.userAgent + "; "; console.log("NavigatorExample", txt); >pre> figure> 

Result

Quotations

figure> figcaption>b>Edsger Dijkstra:b>figcaption> blockquote> If debugging is the process of removing software bugs, then programming must be the process of putting them in. blockquote> figure> 

Result

Poems

figure> p style="white-space:pre"> Bid me discourse, I will enchant thine ear, Or like a fairy trip upon the green, Or, like a nymph, with long dishevelled hair, Dance on the sands, and yet no footing seen: Love is a spirit all compact of fire, Not gross to sink, but light, and will aspire. p> figcaption>cite>Venus and Adoniscite>, by William Shakespearefigcaption> figure> 

Result

Technical summary

Content categories	Flow content, palpable content.
Permitted content	A element, followed by flow content; or flow content followed by a element; or flow content.
Tag omission	None, both the starting and ending tag are mandatory.
Permitted parents	Any element that accepts Flow content.
Implicit ARIA role	figure
Permitted ARIA roles	With no figcaption descendant: any, otherwise no permitted roles
DOM interface	HTMLElement

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Jun 13, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник