Home 〉 HTML Tutorials 〉 HTML '<figure>' Tag - Learn Figure, Figcaption & Cite Tags with Examples
HTML '<figure>' Tag - Learn Figure, Figcaption & Cite Tags with Examples !
HTML '<figure>' Tag - Learn Figure, Figcaption & Cite Tags with Examples !
What is the purpose of the HTML '<figure>' tag and how do you use it effectively?
This blog post explains the use of the '<figure>' tag in HTML along with its associated elements like '<figcaption>' and '<cite>'. We discussed the syntax, element types, attributes, examples, and inline CSS styling. We also explored related tags and how to use them together to improve page structure and SEO. The detailed blog post on HTML '<figure>' tag is as follows.
Introduction
The '<figure>' tag in HTML is a semantic element used to wrap self-contained content like images, illustrations, diagrams, or code examples along with an optional '<figcaption>' for captions. It's part of HTML5 and helps improve the structure and SEO of web pages.
Using '<figure>' with '<figcaption>' and '<cite>' makes your content more readable and meaningful, especially for assistive technologies and search engines.
Syntax of '<figure>' Tag
Syntax ✍
<figure>
<img src="image.jpg" alt="Example Image">
<figcaption>This is an example caption.</figcaption>
</figure>
- '<figure>': The container for the media or illustrative content.
- '<img>': Image or other media to display.
- '<figcaption>': Optional tag to describe or provide a caption for the content inside '<figure>'.
Type of Element
- The '<figure>' tag is a block-level element.
- '<figcaption>' is also a block-level element.
- '<cite>' is an inline element.
Attributes of '<figure>' Tag
The '<figure>' tag supports global attributes and event attributes, but it does not have any specific attributes of its own.
Commonly Used Global Attributes:
The following are the 'attributes' of html 'figure' tag:
- 'id': Specifies a unique ID for the element
- 'class': Assigns one or more class names for CSS
- 'style': Inline CSS styling
- 'title': Tooltip text on hover
- 'lang': Specifies the language of the content
Example:
Code : 1 📝 
<!DOCTYPE html>
<html>
<body>
<figure id="photo1" class="highlight" style="width:300px; padding:10px; border:1px solid #ccc;">
<img src="/images/image.jpg" alt="Nature Image" style="width:100%; border-radius:8px;">
<figcaption style="font-size:14px; text-align:center;">Beautiful Garden</figcaption>
</figure>
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
- 'id="photo1"' uniquely identifies this figure.
- 'class="highlight"' can be targeted in CSS.
- 'style' applies inline CSS.
- The 'figcaption' is centered with custom font size.
🧾 The '<figcaption>' Tag
The '<figcaption>' tag is used inside '<figure>' to provide a caption or description for the image or content.
Example:
Code : 2 📝
<!DOCTYPE html>
<html>
<body>
<figure>
<img src="/images/image.jpg" alt="The Garden Image" width="100%">
<figcaption style="text-align:center; color:#444;">The Garden Image</figcaption>
</figure>
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
The '<cite>' Tag
The '<cite>' tag is used to reference the title of a creative work such as books, songs, or articles. It's an inline element.
Example:
Code : 3 📝
<!DOCTYPE html>
<html>
<body>
<p>Read <cite>The Great Gatsby</cite> by F. Scott Fitzgerald.</p>
</body>
</html>
output 📌
Read The Great Gatsby by F. Scott Fitzgerald.
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
Simple and Effective Inline Styling
Use any of the following inline styles to enhance your layout:
Code : 4 📝
<!DOCTYPE html>
<html>
<body>
<figure style="background-color:#f9f9f9; padding:15px; border:1px solid #ddd; border-radius:6px;">
<img src="/images/image.jpg" alt="Image of a Beautiful Garden" style="width:100%; border-radius:6px;">
<figcaption style="text-align:center; font-size:16px; color:#333;">Garden with Beautiful Flowers</figcaption>
</figure>
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
Conclusion
The HTML '<figure>' tag is a powerful semantic tool that groups related media and descriptions using '<figcaption>', enhancing clarity and structure. Pairing it with '<cite>' and other semantic elements creates cleaner, more accessible, and SEO-friendly HTML documents.
Suggested Topics:
- CSS Border Property Explained with Easy Examples for Beginners
- CSS Border-Radius Property Explained with Examples for Beginners
- CSS color Property Tutorial with Examples - Learn Text Color in CSS
- CSS Font Properties Tutorial with Examples | font-family, font-size, font-style
- CSS Padding Explained with Examples | CSS Box Model Guide
- CSS Text Formatting Properties Explained with Examples | Master Text Styles in CSS
- CSS background-color Tutorial with Examples - Learn Easily
- CSS Width and Height Property Tutorial with Examples for Beginners
Related Topics:
- Complete Guide to HTML Attributes with Examples and Syntax
- HTML img Tag | Complete Guide to HTML Image Tag with Syntax & Attributes
- HTML Semantic Elements - Complete Guide with Examples & Syntax
Frequently Asked Questions (FAQs)
Can I use multiple '<figcaption>' tags in one '<figure>'?
No, each '<figure>' element should contain only one '<figcaption>'.
Is it necessary to use '<figcaption>' with '<figure>'?
No, it's optional, but recommended for better clarity and accessibility.
Can I wrap text content inside '<figure>'?
Yes, but it's mainly meant for media like images, charts, and code samples.
Is '<figure>' supported by all browsers?
Yes, it is fully supported by modern browsers.