HTML and CSS Reference
Figure 9.14 Our Styles Conference Venue page, which now includes inline frames
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.
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.
2. <img src="dog.jpg" alt="A black, brown, and white dog wearing a