to mark up the extra content, like this:
How the World Could End
Scenarios that spell the end of life as we know
by Ray N. Carnation
This, of course, is the content from the previous example, with a slight change: The
subtitle is marked up with the element instead of
.
At first glance, this markup seems potentially confusing. It could, structurally speaking, imply that all the content that follows is part of a subsection that starts with the
level 2 heading, which doesn’t make much sense. After all, who wants an article that
consists entirely of one big subsection? And even though setup this doesn’t affect the
way the page appears in a browser, it does change the way browsers and other tools
build a document outline for your page (as you’ll see on page 70).
Fortunately, the element solves the problem automatically. Structurally
speaking, it pays attention to the top-level heading only (in this case, that’s the ).
Other headings are shown in the browser, but they don’t become part of the document outline. This behavior makes perfect sense, because these headings are meant
to indicate subtitles, not subsections.
Adding a Figure with
Plenty of pages have images. But the concept of a figure is a bit different. The HTML5
specification suggests that you think of them much like figures in a book—in other
words, a picture that’s separate from the text, yet referred to in the text.
chapter 2: a new way to structure pages
53
Retrofitting
a
Traditional HTML
Page
Generally, you let figures float, which means you put them in the nearest convenient
spot alongside your text (rather than lock them in place next to a specific word or
element). Often, figures have captions that float with them.
The following example shows some HTML markup that adds a figure to the apocalyptic article. (It also includes the paragraph that immediate precedes the figure
and the one that follows it, so you can see exactly where the figure is placed in the
markup.)
Right now, you're probably ...
But don't get too smug ...
This markup assumes that you’ve created a style sheet rule that positions the figure
(and sets margins, controls the formatting of the caption text, and optionally draws
a border around it). Here’s an example:
/* Format the floating figure box. */
.FloatFigure {
float: left;
margin-left: 0px;
margin-top: 0px;
margin-right: 20px;
margin-bottom: 0px;
}
/* Format the figure caption text. */
.FloatFigure p {
max-width: 200px;
font-size: small;
font-style: italic;
margin-bottom: 5px;
}
Figure 2-4 shows this example at work.
If you’ve created this sort of figure before, you’ll be interested to know that HTML5
provides new semantic elements that are tailor-made for this pattern. Instead of using a boring to hold the figure box, you use a
element. And if you
have any caption text, you put that in a element inside the :
Will you be the last person standing if one of these
apocalyptic scenarios plays out?
54
html5: the missing manual
Retrofitting a
Traditional HTML
Page
Figure 2-4:
Now a figure graces
the article. In the
markup, it’s defined
just after the first
paragraph, so it
floats to the left of the
following text. Notice
that the width of the
caption is limited, to
create a nice, packed
paragraph.
Of course it’s still up to you to use a style sheet to position and format your figure
box. (In this example, that means you need to change the style rule selector that
targets the caption text. Right now it uses .FloatFigure p, but the revised example
requires .FloatFigure figcaption.)
Tip: Note that the element still gets its formatting based on its class name (FloatFigure), not its
element type. That’s because you’re likely to format figures in more than one way. For example, you might
have figures that float on the left, figures that float on the right, ones that need different margin or caption
settings, and so on. To preserve this sort of flexibility, it makes sense to format your figures with classes.
In the browser, the figure still looks the same. The difference is that the purpose of
your figure markup is now perfectly clear. (Incidentally, isn’t limited to
holding text—you can use any HTML elements that make sense. Other possibilities
include links and tiny icons.)
chapter 2: a new way to structure pages
55
Retrofitting
a
Traditional HTML
Page
Finally, it’s worth noting that in some cases the figure caption may include a complete description of the image, rendering the alt text redundant. In this situation, you
can remove the alt attribute from the
element:
A human skull lies on the sand
Just make sure you don’t set the alternate text with an empty string, because that
means your image is purely presentational and screen readers should avoid it altogether.
Adding a Sidebar with