Adding captions to images

Two new elements are the HTML5 tags FIGURE and FIGCAPTION. The first one, FIGURE, is good for things like images and other graphics, while FIGCAPTION is used to tell people what they are looking at. As an example, take a look at the following code:

<FIGURE>

<IMG SRC="york_images/york_minster.jpg">
<FIGCAPTION>A view of York Minster from a side street.</FIGCAPTION>

</FIGURE>

Here, we've surrounded the IMG code with two FIGURE tags. FIGCAPTION tags are then place under the image. This is what the above code looks like in a browser:

You can have the FIGCAPTION tags above the image, if you prefer:

<FIGURE>

<FIGCAPTION>A view of York Minster from a side street.</FIGCAPTION>
<IMG SRC="york_images/york_minster.jpg">

</FIGURE>

Notice, though, that the FIGURE and FIGCAPTIONS tags don't get formatted for you - you have to do that yourself with some CSS:

FIGCAPTION {

font-style: italic;
font-variant: small-caps;

}

Because FIGURE and FIGCAPTION are new HTML5 tags, older browsers won't know what they are. So they get rendered on the page as inline tags. What this means is you won't get an automatic line break for your figure captions: they will just be side-by-side with the images. The solution is to use the CSS property display with a value of block. Like this:

FIGURE, FIGCAPTION {

display: block;
font-style: italic;
font-variant: small-caps;

}

The CSS above tells the browser to render FIGURE and FIGCAPTION tags as block-level elements. Because block level elements are stacked one on top of the other, your caption will then be in the right place - above or below your images. (You'll learn more about block-level elements in the CSS positioning chapter later in the course.)

But we'll leave images there. In the next section, we'll take a look at hyperlinks.

Posted in: Tips,Trick,Tutorial,Web Design,Web Design 4 (Dealing with Images)