Coastal Media Brand

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.

The <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

Web Design Myrtle Beach

Coastal Media Brand

© 2024 Coastal Media Brand. All rights Reserved.