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
ht-
tp://learn.shayhowe.com/html-css/adding-media .
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.
Click here to view code image
1. <figure>
2. <img src="dog.jpg" alt="A black, brown, and white dog wearing a
kerchief">
3. </figure>
Search WWH ::




Custom Search