What to Hear
- Around the photograph, add a number tag. Put your message to the figcaption tag within that.
- Optionally, put some CSS to spruce up the message with its own qualifications and colours.
How to add a message to a picture is explained in this article. Image captions are crucial because they provide additional details to your physical website factors.
How to Use HTML to Caption an Photo
Follow these instructions to give your images some environment:
-
Consider the image you want to comment in HTML. It ought to look this way:
-
In the number tag surround it:
-
We’ll establish a comment for the element using the figcaption tag. Put it under the url section.
The Caption -
You’re essentially done at this point. The message is immediately beneath the image. This make it a much better by centering the message in a box with some CSS and controlling the size of the picture:
figure {
display: flex;
flex-flow: column;
padding: 5px;
max-width: 500px;
margin: auto;
}
figcaption {
background-color: #000000;
color: #FFFFFF;
font: italic large sans-serif;
padding: 3px;
text-align: center;
}
Thanks for letting us know!
Show us why!