From 754bbf7a25a8dda49b5d08ef0d0443bbf5af0e36 Mon Sep 17 00:00:00 2001 From: Craig Jennings Date: Sun, 7 Apr 2024 13:41:34 -0500 Subject: new repository --- devdocs/html/element%2Ffigure.html | 148 +++++++++++++++++++++++++++++++++++++ 1 file changed, 148 insertions(+) create mode 100644 devdocs/html/element%2Ffigure.html (limited to 'devdocs/html/element%2Ffigure.html') diff --git a/devdocs/html/element%2Ffigure.html b/devdocs/html/element%2Ffigure.html new file mode 100644 index 00000000..bdfbc04b --- /dev/null +++ b/devdocs/html/element%2Ffigure.html @@ -0,0 +1,148 @@ +

<figure>: The Figure with Optional Caption element

The <figure> HTML element represents self-contained content, potentially with an optional caption, which is specified using the <figcaption> 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

+
+

Examples

+ +

Images

+
+
+

html

+
<!-- Just an image -->
+<figure>
+  <img src="favicon-192x192.png" alt="The beautiful MDN logo." />
+</figure>
+
+<!-- Image with a caption -->
+<figure>
+  <img src="favicon-192x192.png" alt="The beautiful MDN logo." />
+  <figcaption>MDN Logo</figcaption>
+</figure>
+
+

Result

+
+ + +
+
+

Code snippets

+
+
+

html

+
<figure>
+  <figcaption>Get browser details using <code>navigator</code>.</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

+
+
+

html

+
<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

+
+
+

html

+
<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 Adonis</cite>, by William Shakespeare</figcaption>
+</figure>
+
+

Result

+
+ + +
+
+

Technical summary

+
Content categories Flow content, palpable content.
Permitted content A <figcaption> element, followed by flow content; or flow content followed by a <figcaption> 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

+
+ + +
Specification
HTML Standard
# the-figure-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
figure81249115.14.41841151.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure +

+
-- cgit v1.2.3