Image with a caption
Now, when you know how to add some images to your web page, let’s now see how can we add a caption to some images (a caption is just some description of the image I guess)
So, to achieve this thing, you again need some tag. Don’t worry, all the tags are meaningful and we are going to use many of these very frequently, so you will get used to them and there is no need to remember much stuff.
So, the tag that we are going to use for caption, is the Figcaption tag. The image and the caption of the image would be wrapped(written) inside another tag, which is the figure tag. Refer to the below example, to understand how can we add some caption to the image.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Image</title>
</head>
<body>
<h1>This is a squirrel</h1>
<figure>
<img src=”squirrel.jpg” alt=”An Image of a squirrel!” width=”500px” height=”300px”>
<figcaption>This is an image of a squirrel</figcaption>
</figure>
</body>
</html>
As you can see, have just wrapped the img tag and Figcaption tag into the figure tag. Now, if we try to open the file in the browser, the output is something like this –
As you can see, the caption is there with the image.
