How To Add Caption For Image In Html

3 Ways to Add a Caption to an Epitome Using Markdown

Never Forget to Add together a Reference to Your Epitome

This article discusses how to apply a caption to a web image in Markdown and ensure that the caption remains with the image no thing where y'all move information technology on the spider web folio.

Why do we demand an Image Caption?

Captions for images are essential considering they provide additional information to the visual web page features.

They convey vital information most who's doing what, when, where, and (sometimes) why. Solid captions paired with interesting photographs tin can spark a reader's interest in a full-text story. Without captions, people draw their ain conclusions about a photograph. — Laura Elizabeth Pohl

1. HTML `<figcaption>` Tag

Figure caption element represents a explanation or legend that describes the rest of the contents of its parent <figure> chemical element.

The <figcaption> element can be placed every bit the first or final child of the <figure> chemical element.

            <effigy>            <img src="https://images.unsplash.com/photo-1549740425-5e9ed4d8cd34?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxjb2xsZWN0aW9uLXBhZ2V8MXwzOTU0NTB8fGVufDB8fHw%3D&w=1000&q=eighty" alt="Trulli" style="width:100%">            <figcaption align = "center"><b>Fig.1 - 4K Mountains Wallpaper</b></figcaption>            </effigy>

The higher up lawmaking results every bit shown beneath.

2. Using Markdown Tabular array

One of the other simplest ways to add together a caption to an image is by using a Markdown table. Y'all can learn to create tables in Markdown by reading this article.

            | ![space-1.jpg](https://blog-assets.thedyrt.com/uploads/2019/01/shutterstock_1033306540-1.jpg) |            |:--:|            | <b>Image Credits - Fig.2 - 4K Mountains Wallpaper</b>|

The to a higher place code results as shown below.

3. HTML `<p>` Tag

You can also use the rudimentary HTML paragraph <p> tag to add captions every bit well. In this instance, you might want to use the align = "eye" attribute to center the captions of the image.

            <p align = "center">            <img src = "https://c4.wallpaperflare.com/wallpaper/382/758/444/turkey-dreams-of-cappadocia-avanos-nevsehir-wallpaper-preview.jpg">            </p>            <p align = "centre">
Fig.1 - 4K Mountains Wallpaper
</p>

The above code results as shown beneath.

Conclusion

Well, that's information technology for this short tutorial for calculation captions to an image using Markdown. I call back everyone should add together captions to their images considering it gives a scrap more information about what the image is talking about. Image captions are only a sentence or two. With that beingness said, there are other elementary ways to add together captions as well. Let me know if yous detect something that catches your eye then that it will exist beneficial for others equally well. Until then, stay safe and see you next time.