- HTML Tutorial
- HTML - Home
- HTML - Introduction
- HTML - Editors
- HTML - Basic Tags
- HTML - Elements
- HTML - Attributes
- HTML - Headings
- HTML - Paragraphs
- HTML - Fonts
- HTML - Blocks
- HTML - Style Sheet
- HTML - Formatting
- HTML - Quotations
- HTML - Comments
- HTML - Colors
- HTML - Images
- HTML - Image Map
- HTML - Iframes
- HTML - Phrase Elements
- HTML - Meta Tags
- HTML - Classes
- HTML - IDs
- HTML - Backgrounds
- HTML Tables
- HTML - Tables
- HTML - Headers & Caption
- HTML - Table Styling
- HTML - Table Colgroup
- HTML - Nested Tables
- HTML Lists
- HTML - Lists
- HTML - Unordered Lists
- HTML - Ordered Lists
- HTML - Definition Lists
- HTML Links
- HTML - Text Links
- HTML - Image Links
- HTML - Email Links
- HTML Color Names & Values
- HTML - Color Names
- HTML - RGB
- HTML - HEX
- HTML - HSL
- HTML Forms
- HTML - Forms
- HTML - Form Attributes
- HTML - Form Control
- HTML - Input Attributes
- HTML Media
- HTML - Video Element
- HTML - Audio Element
- HTML - Embed Multimedia
- HTML Header
- HTML - Head Element
- HTML - Adding Favicon
- HTML - Javascript
- HTML Layouts
- HTML - Layouts
- HTML - Layout Elements
- HTML - Layout using CSS
- HTML - Responsiveness
- HTML - Symbols
- HTML - Emojis
- HTML - Style Guide
- HTML Graphics
- HTML - SVG
- HTML - Canvas
- HTML APIs
- HTML - Geolocation API
- HTML - Drag & Drop API
- HTML - Web Workers API
- HTML - WebSocket
- HTML - Web Storage
- HTML - Server Sent Events
- HTML Miscellaneous
- HTML - MathML
- HTML - Microdata
- HTML - IndexedDB
- HTML - Web Messaging
- HTML - Web CORS
- HTML - Web RTC
- HTML Demo
- HTML - Audio Player
- HTML - Video Player
- HTML - Web slide Desk
- HTML Tools
- HTML - Velocity Draw
- HTML - QR Code
- HTML - Modernizer
- HTML - Validation
- HTML - Color Picker
- HTML References
- HTML - Cheat Sheet
- HTML - Tags Reference
- HTML - Attributes Reference
- HTML - Events Reference
- HTML - Fonts Reference
- HTML - ASCII Codes
- ASCII Table Lookup
- HTML - Color Names
- HTML - Entities
- MIME Media Types
- HTML - URL Encoding
- Language ISO Codes
- HTML - Character Encodings
- HTML - Deprecated Tags
- HTML Resources
- HTML - Quick Guide
- HTML - Useful Resources
- HTML - Color Code Builder
- HTML - Online Editor
HTML - <figure> Tag
HTML <figure> tag is used to create self-contained content. The self-contained contents are diagrams, images, code examples, and so on.
The content of the <figure> tag is connected to the content of the main flow. It is viewed as a standalone unit. HTML <figcaption> tag can be used to give a caption or explanation to the content of the <figure> tag.
Syntax
<figure> ... </figure>
Attribute
HTML figure tag supports Global and Event attributes of HTML.
Examples of HTML figure Tag
Bellow examples will illustrate the usage of figure tag. Where, when and how to use figure tag and how we can style that figure elements using CSS.
Creating figure Element using figure tag
In the following we are going to use the HTML <figure> tag .
<!DOCTYPE html> <html> <body> <figure> <img src="https://www.tutorialspoint.com/cg/images/logo.png" alt="LOGO" /> </figure> </body> </html>
Styling figure Element
here in this example we will set a rounded border arroud the figure and padding and margin on the element as well.
<!DOCTYPE html> <html> <head> <style> figure { margin: 20px; padding: 10px; border: 1px solid #ccc; border-radius: 10px; background-color: #fff; display: inline-block; } </style> </head> <body> <figure> <img src="https://www.tutorialspoint.com/cg/images/logo.png" alt="LOGO" /> </figure> </body> </html>
Caption on figure Element
Let’s look at the following example, where we are going to observe the difference between the <div> tag and the <figure>> tag.
<!DOCTYPE html> <html> <head> <style> .child { display: inline-block; } .child, img{ border: 1px solid black; } </style> </head> <body> <div> <div class="child"> <p>Using div Tag:</p> <div> <img src="https://www.tutorialspoint.com/cg/images/logo.png" alt="logo"> <p>TutorialsPoint Logo</p> </div> </div> <div class="child"> <p>Using figure Tag:</p> <figure> <img src="https://www.tutorialspoint.com/cg/images/logo.png" alt="Logo"> <figcaption>TutorialsPoint Logo</figcaption> </figure> </div> </div> </body> </html>
Supported Browsers
Tag | |||||
---|---|---|---|---|---|
figure | Yes 8.0 | Yes 9.0 | Yes 4.0 | Yes 5.1 | Yes 11.0 |
To Continue Learning Please Login
Login with Google