How to add caption under image in HTML

From the author: how to make in html a caption under a picture? Really, how? At first glance everything seems easier than ever, but in fact not everyone can think of how to place the text exactly under the picture, because it is a line element.

The most primitive option

Immediately after the image put the tag br and write the desired text. Of course, it will not be located in the center, but it will be under the picture, so it can already be called a signature. This option is not suitable for those cases when the photo is not in the very beginning of the line, because in this case it will not be clear from the printed text what it refers to.

You don’t have to put a br tag, you can just put the caption in a paragraph tag, then the text will be moved to the next line by itself, because a paragraph is a block element.

Okay, that was the easiest way, which is not always suitable, so I suggest you consider more correct ways.

Combining image and caption into a block

This is pretty simple. We’ll put the image and its caption in a separate block.

<div class="dog">
	<img src="dog.png">
	<p>Dog</p>
</div>

With this method you can easily align the caption text exactly in the center of the image, but you need to limit the width of the main container, put it exactly the same as the width of the image:

.dog p{
	text-align: center;
}
.dog{
	max-width: 200px;
}

In my case, it’s 200 pixels.

With the .dog p selector, you can apply additional styles to your signature.

Using the figure tag

The following solution is the most optimal, because it uses html5 tags – figure and figcaption. They are intended for grouping any elements together.

In fact, the code of the previous example even fits almost completely, we just need to replace div with figure and p with figcaption:

<figure class="dog">
	<img src="dog.png">
	<figcaption>Dog</figcaption>
</figure>

Everything else is also true for this variant. In particular, placing the text in the figcaption tag itself does not center it. To center it, you need to do the same thing we did in the previous method. I’ve changed the color of the text so that the caption in this example is at least somewhat different from what we did in the previous example.

As you can see, both methods give the same result. And 1 more variant to follow

In this example, you don’t need to put the picture and caption in a block or a shape, they can be just independent elements, but they must stand behind each other in the markup.

<img class="dog" src="dog.png">
<p>Dog</p>

Now the style class I prescribed not to the block, but to the image, because there is no block. It’s all about the styles, here they are:

.dog{
	display: block;
}
.dog + p{
	width: 200px;
	text-align: center;
}

So, we make our image blocky. In principle, in the case of the paragraph it was not necessary to do this, but if you would write the caption, for example, in the span tag, then the need to set the block behavior would be, because otherwise the picture and the caption would be on the same line.

Well, to center the caption on the image, we give it the width of the image and center alignment of the text. Notice the selector I used. Such selectors are called neighbor selectors. For example: .dog + p – the paragraph that lies in the html markup right after the element with the class dog will be selected.

The result is similar to the previous methods, I won’t even show a screenshot. Well, these are all the ways to make a caption under the image in html, which I wanted to show you. The matter is really very small, so there is no point in thinking about it, just choose any method and do it.