There is a proper way to add a caption to an image in HTML.
While we could wrap everything in a <div>, there’s a more semantic approach that improves accessibility.
It's by using the <figure> and <figcaption> HTML tags:
<figure>
<img src="image.jpg" alt="Description of the image">
<figcaption>This is the caption for the image.</figcaption>
</figure>
<img src="image.jpg" alt="Description of the image">
<figcaption>This is the caption for the image.</figcaption>
</figure>
In Breakdance, we just need to create the same structure:
Then we just need to change the tags: figure for the Div, and figcaption for the text element:
If you want to apply a particular style to your figure or figcaption, just add your custom CSS:
figcaption {
font-style: italic;
font-size: 1rem;
align-self: flex-end;
}
font-style: italic;
font-size: 1rem;
align-self: flex-end;
}