The Figure Tag

You can use the <figure> tag set to surround the image and the <figcaption> tag set.

You may need to remove any classes from the image, you have HTML code that looks like:

<figure>
        <img src="./images/person-typing.jpg" alt="person typing on a laptop" class="">
        <figcaption>Fig. 1.1 - Person typing on a laptop</figcaption>
</figure>

You can use CSS to style your figure, and caption area as well, to help them stand out and have a standard look.

For example, you might use a similar floating technique to move all of the images to the side, and use a slight background color to offset it from other text. Of course you can set different values based upon the size, resolution, and style of your website, however, here is some basic CSS you can follow.

figure {
    background-color: #eee;
    padding: 5px;
    border: 1px #888 solid;
}
figcaption {
    text-align: center;
    padding: 10px 0;
}
figure .left {
    float: left;
    margin: 0 10px 10px 0;
}

The use of the figure tag is most helpful when you need to apply a caption to an image, and should be used for such purposes.

The Figure Tag was originally found on Access 2 Learn