Figure and Figcaption Elements

The figure and figcaption elements are used in conjunction with the image element. Figure provides context to the image, while figcaption provides a caption.

Note that the image has a maximum width of 100%, while the figure has a width of 640 pixels. Since the image is contained within the figure, the image will display at a maximum width of 640 pixels. If no width is specified for the image, the image will display at actual size.

HTML

<figure>
<img src="fcf.jpg" alt="Fall Creek Falls">
<figcaption>Fall Creek Falls</figcaption>
</figure>

CSS

figure {
width: 640px;
border: thin solid black;
padding: 5px;
}

figcaption {
text-align: center;
font-family: Papyrus, fantasy;
}

img {
max-width: 100%;
}