HTML5 figure Tag
The <figure> tag is used to insert self-contained content such as illustrations, diagrams, photos, or code listings in a document. It can be placed at any position in the document and is related to the main flow. The content inside the <figure> tag goes with the flow of the document, so if it is removed, it won’t affect the flow of the document. This tag is a new addition to HTML5.
To add a description or caption for the content inside the <figure> tag, we use the <figcaption> tag. The <figure>
tag also supports the Global Attribute and Event Attributes in HTML
Syntax:
<figure> Image content... </figure>
Attributes:
Attribute Values |
Description |
---|---|
This tag is used to add an image source to the document. |
|
This tag is used to set the caption to the image. |
Example 1: In this example, we will see the implementation of figure tag with an example.
HTML
<!DOCTYPE html> < html > < body > < h1 >w3wiki</ h1 > < h2 > < figure > Tag </ h2 > <!--HTML figure tag starts here--> < figure > < img src = "https://media.w3wiki.net/wp-content/uploads/Beginner-25.png" alt = "The Pulpit Rock" width = "304" height = "228" > < figcaption >Beginner logo</ figcaption > </ figure > <!--HTML figure tag ends here--> </ body > </ html > |
Output:
Example 2: In this example, we will see the implementation of figure tag with another example.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title >Figure Tag Beginner</ title > < style > body { font-family: Arial, sans-serif; background-color: #f0f0f0; text-align: center; } h1 { background-color: #333; color: #fff; padding: 15px; } figure { margin: 20px; padding: 10px; border: 1px solid #ccc; border-radius: 10px; background-color: #fff; display: inline-block; } img { max-width: 100%; height: auto; border-radius: 4px; } figcaption { margin-top: 10px; font-style: italic; color: #555; } </ style > </ head > < body > < h1 >w3wiki</ h1 > < h2 >Figure Tag Example</ h2 > <!-- HTML figure tag starts here --> < figure > < img src = "https://media.w3wiki.net/wp-content/uploads/Beginner-25.png" alt = "Beginner Logo" width = "304" height = "228" > < figcaption >Beginner logo</ figcaption > </ figure > <!-- HTML figure tag ends here --> </ body > </ html > |
Output:
Supported Browsers:
- Google Chrome 8
- Edge 12
- Firefox 4
- Opera 11
- Safari 5.1
Contact Us