The introduction of HTML5 brought about many new elements designed to create more meaningful documents and applications. Among these, the <figure> element stands out as a versatile tool for adding media content along with their captions to a web page.
Officially introduced in October 2014 as part of the HTML5 specification by the World Wide Web Consortium (W3C), the HTML <figure> element encapsulates media such as images, diagrams, photos, and code snippets.
Syntax
The syntax (including the optional <figcaption> element) is as follows:
1 |
<figure>
|
2 |
<img src="path_to_image" alt="alternative text"> |
3 |
<figcaption>Caption for the image</figcaption> |
4 |
</figure>
|
Examples
Below are a few examples of different use cases for the figure element. You can include all types of rich media along with a caption, as shown.
<figure> element can be styled just like any other block-level element.Figure With an Image
1 |
<figure>
|
2 |
<img src="images/sample.jpg" alt="A sample image"> |
3 |
<figcaption>This is a sample image.</figcaption> |
4 |
</figure>
|
↓
Figure With Code Snippet
1 |
<figure>
|
2 |
<pre><code>
|
3 |
function helloWorld() {
|
4 |
console.log("Hello, world!");
|
5 |
} |
6 |
</code></pre>
|
7 |
<figcaption>JavaScript function to print "Hello, world!"</figcaption> |
8 |
</figure>
|
↓
Figure With a Table
1 |
<figure>
|
2 |
<table>
|
3 |
<tr>
|
4 |
<th>Name</th> |
5 |
<th>Email</th> |
6 |
</tr>
|
7 |
<tr>
|
8 |
<td>John Doe</td> |
9 |
<td>john@example.com</td> |
10 |
</tr>
|
11 |
</table>
|
12 |
<figcaption>Table showing user information.</figcaption> |
13 |
</figure>
|
Figure With a Video
1 |
<figure>
|
2 |
<video src="videos/sample.mp4" controls></video> |
3 |
<figcaption>Sample video with controls.</figcaption> |
4 |
</figure>
|
Figure With Audio
1 |
<figure>
|
2 |
<audio src="audio/sample.mp3" controls></audio> |
3 |
<figcaption>Sample audio with controls.</figcaption> |
4 |
</figure>
|
↓
Attributes
The <figure> element has no specific attributes; it uses the global attributes in HTML.
Content
The <figure> element accepts flow content as children. It often contains one or more <img> elements, optionally with a <figcaption> element to provide a caption.
Did You Know?
- The
<figure>element is an independent type of content, meaning it can be moved away from the document’s main flow without affecting its meaning. - The
<figcaption>element, used within a<figure>element, can appear before or after the content, but it’s generally good practice to place it after.
Learn More
HTML Elements
