7.1 The <figure> Element
Using the <figure> and <figcaption> tags in HTML provides a semantic way of adding images and other multimedia elements with captions. These tags help improve the content structure, making it more accessible and understandable for both users and search engines. Let's dive deeper into these elements.
The <figure> element is used to mark standalone content that illustrates or clarifies the rest of the document. It can contain an image, chart, video, audio, table, or even a code block. Typically, the <figure> element is used alongside the <figcaption> element, which adds a caption to the <figure> content.
Syntax
<figure>
<!-- Here can be any multimedia element, like an image -->
</figure>
Usage examples:
Example 1: Image with a caption
<figure>
<img src="example.jpg" alt="Example image">
<figcaption>Caption explaining the content of the image</figcaption>
</figure>
Example 2: Table with a caption
<figure>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
<figcaption>Caption for the table</figcaption>
</figure>
7.2 The <figcaption> Element
The <figcaption> element is used to add a caption to the content of a <figure> element. It can be placed either before or after the <figure> content, depending on the developer's preference or design requirements.
Syntax
<figure>
<!-- Content of the figure element -->
<figcaption>Caption for the content</figcaption>
</figure>
Usage examples:
Example 1: Caption after the image
<figure>
<img src="landscape.jpg" alt="Landscape">
<figcaption>Beautiful landscape with mountains and a lake</figcaption>
</figure>
Example 2: Caption before the image
<figure>
<figcaption>Beautiful landscape with mountains and a lake</figcaption>
<img src="landscape.jpg" alt="Landscape">
</figure>
7.3 Accessibility and SEO
Using the <figure> and <figcaption> elements enhances the accessibility and SEO of your website. Screen readers, used by people with disabilities, better understand the context of the image thanks to the semantic <figcaption> tag. Search engines also consider HTML document structure, which helps improve indexing and page ranking.
Examples of use in various contexts:
Example 1: Embedding a chart
<figure>
<img src="chart.png" alt="Chart showing sales growth">
<figcaption>Chart showing sales growth for the last quarter</figcaption>
</figure>
Example 2: Video content with a caption
<figure>
<video controls>
<source src="example.mp4" type="video/mp4">
Your browser doesn't support video.
</video>
<figcaption>Example video demonstrating product functionality</figcaption>
</figure>
Example 3: Code with explanation
<figure>
<pre>
<code>
function helloWorld() {
console.log('Hello, world!');
}
</code>
</pre>
<figcaption>Example of a JavaScript function that outputs "Hello, world!" to the console</figcaption>
</figure>
7.4 Styling with CSS
Styling the <figure> and <figcaption> elements with CSS allows for attractive visual design and improves content perception.
Example with styles applied:
figure {
border: 1px solid #ccc;
padding: 10px;
margin: 20px;
text-align: center;
}
figcaption {
font-style: italic;
color: #555;
margin-top: 10px;
}
<figure>
<img data-max-width="800" data-id="ef101655-fef4-40b9-8b6c-f0c02494a747" src="https://cdn.javarush.com/images/article/ef101655-fef4-40b9-8b6c-f0c02494a747/800.jpeg" alt="nature">
<figcaption>Beautiful view of nature</figcaption>
</figure>
<figure>
<img src="nature.jpg" alt="Nature">
<figcaption>Beautiful view of nature</figcaption>
</figure>
Using <figure> and <figcaption> elements provides a semantic and structured way of adding multimedia content with captions to web pages. These elements not only enhance accessibility and SEO but also make content more understandable and structured for users.
GO TO FULL VERSION