HTML5 Developer’s Cookbook: Grouping, Text-level and Re-defined Semantics
- Beginner Recipe: How to markup figures and captions using the figure and figcaption elements
- Beginner Recipe: How to markup the date and time using the <time> element
- Beginner Recipe: Make a Native Toggle Widget with the <details> element
- Beginner Recipe: How to Correctly Use the <address> Element
- Beginner Recipe: Highlight Text with the <mark> Element
- Beginner Recipe: Tracking the Completion of a Task with the <progress> Element
- Beginner Recipe: Measuring with the <meter> Element
- Beginner Recipe: How and When to Use the <s> element
- Beginner Recipe: Changes to existing elements
- Recipe: Wrapping links around elements
- Intermediate Recipe: Adding more semantic information with Microdata
- Intermediate Recipe: Using WAI-ARIA with HTML5
- Advanced Recipe: Markup an Article Page with Comments
This excerpt is from the Rough Cuts version of the book and may not represent the final version of this material. Figures and other elements are not yet available.
From the Rough Cut
From the Rough Cut
From the Rough Cut
In the previous chapter we learnt about several new HTML5 elements. Those elements enable us to create the main structure of the page. In this chapter we’ll be looking at more new HTML5 elements - figure, time, details, mark, progress and meter; some elements that have been re-defined -address, s, cite, ol, dl, small, b, strong, i, em, abbr and hr; and finally we'll look at new block-level links and WAI-ARIA. These elements are known as "grouping" or "text-level" elements and deal with the content of the page.
Beginner Recipe: How to markup figures and captions using the <figure> and <figcaption> elements
The figure element allows us to wrap an image and give it a description. Previously we would have had to use a div or something similar and then add the text to the page, doing this means there is no link between the image and the caption. But now with figure we can associate the two.
Also, inside figure, it does not have to be an image; it could be a diagram, photograph, sections of code, tabular data, audio or video. A typical use however will be an image as shown in Figure 2.1 and the code used to create Figure 2.1 is in Listing 2.1:
)
Figure 2.1 Figure element used to display a chart and a caption
Listing 2.1
<figure> <img alt="Bar chart" src="analytics.gif" /> <figcaption> Website analytics for October 2010 </figcaption> </figure>
There has been confusion over whether an alt is still needed in an example like this. Outside of figure, an img always needs an alt. If the image is purely presentational and it doesn’t need the image to be identified by assistive technology, then an empty alt attribute can be applied. With figure if the caption is a suitable description then no alt is needed. However, due to lack of browser and assistive technology support, this currently hinders accessibility. We suggest erring on the side of caution here and provide an alt anyway. In the description above, the caption is straightforward enough, but to someone using a screen reader it is unknown how they analytics are represented, so our alt text supplies this information.
<figure role="img" aria-labelledby="analytics"> <img alt="" src="analytics.gif" /> <figcaption id="analytics"> Website analytics for October 2010 </figcaption> </figure>
Also, even though the example uses an image of a chart/graph, there is no reason why you couldn’t use a generated graph, which could be done using JavaScript and/or canvas.
As Figure 2.2 shows, you are not limited to just one image or figure; you can use the figure element to display multiple images. The code for Figure 2.2 is in Listing 2.2
Figure 2.2 Figure element used to display three images, which share the one caption
Listing 2.2
<figure> <img alt="October 2010 data in bar chart format" src="analytics-october.jpg" /> <img alt="November 2010 data in bar chart format" src="analytics-november.jpg" /> <img alt="December 2010 data in bar chart format" src="analytics-december.jpg" /> <figcaption> Comparative website analytics for Winter 2010 (Ooctober, November, December) </figcaption> </figure>
Should you always use a figcaption when displaying such content? If the image (or chart, table, etc) is for purely presentational reasons, then just use a normal img tag. However, if it has additional information and is beneficial to the content then it will likely require a description to go with it, so in this case, use figure and figcaption.