Figure and figure caption
As you may recall from a previous module, we added images to our HTML pages using the image tag <img>. One of the problems with <img> is that it is not as semantic as it could be. There are many ways to use images on a website:
In all of these cases, we would traditionally use <img> to place the images, but as you can see, they all have different meanings and uses. Sematic HTML is all about adding extra meaning to content. To provide more information, the HTML5 spec now includes an element strictly for images as content. This element is called figure. It is written as <figure>. It also has a sibling property called figure caption, written as <figcaption>. This allows us to pair an image with a caption. A first for HTML. Let's take a look at <figure> in action.
The HTML code for the figure element is pretty straight-forward. The thing you may notice is that the figcaption is a child of the figure element. So the hierarchy of a figure looks like this:
<figure>
image or images to be used
<figcaption>
text for caption
</figcaption>
</figure>
Note figcaption is always a child of figure.
- As pure decoration
- As bullet items in a list
- As background elements
- As a link
- As content
In all of these cases, we would traditionally use <img> to place the images, but as you can see, they all have different meanings and uses. Sematic HTML is all about adding extra meaning to content. To provide more information, the HTML5 spec now includes an element strictly for images as content. This element is called figure. It is written as <figure>. It also has a sibling property called figure caption, written as <figcaption>. This allows us to pair an image with a caption. A first for HTML. Let's take a look at <figure> in action.
The HTML code for the figure element is pretty straight-forward. The thing you may notice is that the figcaption is a child of the figure element. So the hierarchy of a figure looks like this:
<figure>
image or images to be used
<figcaption>
text for caption
</figcaption>
</figure>
Note figcaption is always a child of figure.