HTML and CSS Reference
In-Depth Information
But this feels a bit dirty, a bit grubby, and a bit amoral. It is almost completely
semantically devoid, with nothing to let a browser or screen reader know this is a
figure and caption, and certainly nothing to associate the caption with the figure!
HTML5 offers a much better solution:
<figure>
g ” s s a e g
p
important content”></p>
<figcaption>This is a very important picture.</figcaption>
</figure>
This code provides a consistent, semantic way of defining a figure and asso-
ciating a caption with it. Note that the figure—the image in this case—can be
anything you want. It could be a few images, videos, a
<canvas>
, or a combination
of content types.
<TIME>
<time>
quite simply provides you with a decent semantic way of marking up a date
and time. Here's a simple example:
<time datetime=”1978-06-27”>27th June 1978</time>
The
datetime
attribute contains an ISO-standard date and time, which is unam-
biguous and machine-readable. The text inside the tags, on the other hand, can
be any representation of the time and date you want and thus can be customized
to suit the style of your site. You could also write:
<time datetime=”1978-06-27”>June 27 1978</time>
<time datetime=”1978-06-27”>My birthday</time>
<time datetime=”1978-06-27”>Nineteen seventy-eight, June the
p
twenty-seventh</time>
