Mastering HTML Figure Captions

Introduction

The HTML <figcaption> tag is used to provide captions for content inside the <figure> element. In this lab, you will learn how to use the <figcaption> tag to add captions to your images.

Note: You can practice coding in index.html and learn How to Write HTML in Visual Studio Code. Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/MultimediaandGraphicsGroup(["`Multimedia and Graphics`"]) html/MultimediaandGraphicsGroup -.-> html/multimedia("`Multimedia Elements`") html/MultimediaandGraphicsGroup -.-> html/fig_cap("`Figure and Caption Association`") subgraph Lab Skills html/multimedia -.-> lab-70757{{"`HTML Figure Caption`"}} html/fig_cap -.-> lab-70757{{"`HTML Figure Caption`"}} end

Adding the Image and Caption

Open the index.html file in your preferred text editor and write the basic HTML structure. Add the <DOCTYPE> declaration, <html>, <head>, and <body> tags.

Inside the <body> tag, create a <figure> element with an image tag inside. You can use any image of your choice. For example:

<figure>
  <img src="your-image-url-here" alt="Your image description" />
</figure>

Now, add a <figcaption> tag immediately after the <img> tag to provide a caption for the image. For example:

<figure>
  <img src="your-image-url-here" alt="Your image description" />
  <figcaption>Image caption goes here</figcaption>
</figure>

Save your changes to the index.html file and open it in your web browser. You should now see the image with its caption below it.

Styling the Caption

By default, the <figcaption> tag is a block-level element that takes up the full width of the parent element. You can style the caption using CSS to adjust its positioning, font, color, etc.
Add the following CSS code to the <head> section of your index.html file to change the font, font size, and color of the caption:

figcaption {
  font-family: Arial, sans-serif;
  font-size: 18px;
  color: #555;
}

You can also change the position of the caption by using CSS to adjust the margin and padding properties of the <figcaption> tag. For example:

figcaption {
  margin-top: 10px;
  padding: 5px;
}

Adding Multiple Images and Captions

You can add multiple images and captions to a single web page by repeating the previous steps. Just create a new <figure> element with an <img> tag and <figcaption> tag for each image.
Save your changes to the index.html file and refresh the web page. You should now see all of your images with their captions below them.

Summary

The HTML <figcaption> tag is a powerful tool for providing image captions in your web pages. By using this tag, you can make your images more accessible and user-friendly for your audience. Don't forget to style your captions using CSS to make them look great too!

HTML Figure Caption