HTML5 - Part 2

Go back to HTML5 - Part 1

Figures and captions

While we have always been able add descriptive text next to images in web pages, we haven’t been able to semantically connect that text to the image in such a way that browsers and web readers understood the
connection. Thankfully, HTML5 gives us two new elements for just that purpose.

The figure element

First, we use the new figure element allows us to accurately identify the images to which the captions are connected.

<figure>
  <img src=”photo.jpg” alt=”Students walk to class after a snow storm.”>
</figure>

Note that this element is not limited to images. You can designate other types of content as figures as well. Tables and even blocks of text content can also be placed in between opening and closing figure tags, to identify them as figures.

The figcaption element

After a portion of content has been designated as a figure, you can use the figcaption element to add a text caption.

<figure>
  <img src=”photo.jpg” alt=”Students walk to class after a snow storm.”>
  <figcaption>
    Students walk to class after a snow storm.
  </figcaption>
</figure>

Then, after you’ve used these two elements to tell the browser the intention behind the content, you can use styles to customize the way those elements display.

 
In above show, for example, styles were used to round the corners of the image, and then to adjust the spacing around the image and the size of the text caption.

Read Next - HTML5 - Part 3