HTML and CSS Reference
In-Depth Information
Figure 9.14
Our Styles Conference Venue page, which now includes inline frames
The
source
code
for
the
exercises
within
this
lesson
can
be
found
at
Semantically Identifying Figures & Captions
With HTML5 also came the introduction of the
<figure>
and
<figcaption>
ele-
ments. These elements were created to semantically mark up self-contained content or me-
dia, commonly with a caption. Before HTML5 this was frequently done using an ordered
list. While an ordered list worked, the markup was not semantically correct.
Figure
The
<figure>
block-level element is used to identify and wrap self-contained content,
often in the form of media. It may surround images, audio clips, videos, blocks of code,
diagrams, illustrations, or other self-contained media. More than one item of self-contained
content, such as multiple images or videos, may be contained within the
<figure>
ele-
ment at a time. If the
<figure>
element is moved from the main portion of a page to
another location (for example, the bottom of the page), it should not disrupt the content or
legibility of the page.
1.
<figure>
2.
<img src="dog.jpg" alt="A black, brown, and white dog wearing a
kerchief">
3.
</figure>
Search WWH ::
Custom Search