<figure> and <figcaption>

There are two rarely used HTML tags that work wonderfully for captioning an image, video, or chart. They are figure and figcaption.

Hint: When you want to caption a table of data, use the <caption> tag instead.

The HTML structure for the bagel photo is:

<figure>
	<img src="photo.jpg">
	<figcaption>A delicious…</figcaption>
</figure

You’ll notice that the <figcaption> is inside the <figure> tag. There can be only one figcaption per figure, and it should be either the first element or last element inside the figure tag.

I will leave the CSS styling as an exercise for you to complete. In the example above, my CSS is:

figure {
	float:right; 
	background-color:white; 
	padding:10px;
	width:250px; 
	margin-left:1.5em;
}
figcaption {
	font-size:smaller;
	margin-top:.5em;
}