Html figure with caption

: 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.

Источник

Html figure with caption

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

Время чтения: меньше 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>    Скопировать Скопировано Не удалось скопировать   

Подсказки

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

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

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

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

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

Источник

Web Style Sheets CSS tips & tricks

For example, to float the figure to the right, in a space equal to 30% of the width of the surrounding paragraphs, these rules will do the trick:

In fact, only the first two declarations (float and width) are essential, the rest is just for decoration.

Scaling the image

There is one problem here, and that is that the image may be too wide. In this case, the image is always 136 px wide and the figure is 30% of the surrounding text. So if you make the window narrower, it may be that the image overflows the figure (try it!).

If you know the width of all images in the document, you can add a minimum width to figure, like this:

And this is the style sheet:

The only addition is the last rule: it makes the image as wide as the inside of the figure (the area inside the border and the padding).

Putting the caption on top

Scaling the image in HTML4

To avoid that wide images overflow the figure, and if you know the width of all images in the document, you can add a minimum width to the DIV, e.g., like this:

Saint Tropez and its fort in the evening sun

To scale the image to the width of the figure instead (as we have done with the image on the right), you can add a CLASS attribute and a CSS rule, very similar to the HTML5 example above. Here is the mark-up we used:

 
Saint Tropez and its fort in the evening sun
 

And this is the style sheet:

The only addition is the last rule: it makes the image as wide as the inside of the DIV (the area inside the border and the padding).

Putting the caption on top in HTML4

The Mediterranean Sea near Cap Ferrat

To put the caption on top, add these rules to the style sheet from the previous sections:

The ‘+’ causes the rule to match a P that follows another P. Which means in this case that it matches the second P of the figure, the one that contains the caption.

(This technique may expose bugs in some browsers from before 2003, especially when combined with scaling the image, as I did here.)

As before, the gray border that we chose to put around the figures on this page will only be around the image itself with this technique. To put it around the image and the caption, add these rules:

Site navigation

Bert Bos, style activity lead
Copyright © 1994–2021 W3C ® Privacy policy

Created 17 January 2001;
Last updated Wed 06 Jan 2021 05:40:49 AM UTC

Источник