HTML and CSS Reference
In-Depth Information
Figure 7-13.
The image breaks the paragraph in two
As you can see, the text is broken at the point the image was inserted into the text, so you need to put the
image at a convenient break point, such as the end of a sentence.
Adding a Caption to an Image
As the old saying goes, an image is worth a thousand words. But a few choice words added to an image as a
caption can make all the difference. HTML5 introduces two new tags,
<figure>
and
<figcaption>
, specifically
designed to handle images with captions. You wrap the image inside a
<figure>
element together with its caption
in a
<figcaption>
element. Instead of floating the image, you float the
<figure>
element.
■
iE 6-8 don't support
<figure>
,
<figcaption>
, and other HTml5 elements. The following discussion
describes how they work in modern browsers, including iE 9+. later in this chapter, i'll explain a cross-browser
solution for adding a caption to an image.
Note
Unfortunately, you can't use the
<figure>
and
<figcaption>
tags inside a paragraph because they're regarded
as block-level elements—or
ow content
to use the HTML5 terminology for elements that are used in the body of
a document. In the past, browsers have been very forgiving if you break the rules, so you might be tempted to nest
a
<figure>
and
<figcaption>
inside a paragraph like this (the code is in nested_figure.html):
<p>
<figure class="floatleft">
<img src="images/nice seafront.jpg" alt="Nice seafront"
width="400" height="266">
<figcaption>
Nice seafront from la Colline du Château
</figcaption>
</figure>
Tear yourself away. . .</p>
As Figure
7-14
shows, the left side of the image is no longer flush with the paragraphs.
