A web page or application would be pretty boring without
images! Whether your images are logos, photographs, pictures
of products for sale, or game sprites, it's important to know
how to display images in an HTML document.
Images help us to display
visuals that aid the understanding or enhance the written
content on the page. It is equally
important to understand how to make those images accessible
to all your users, even users who are visually impaired!
This lesson shows you how to add images to your pages, when
to use the semantic <figure> elements, and how to make
images accessible to all users.
Images (img Element)
You already learned the basics of displaying images on a page
using the <img> element in the
HTML Basics lesson.
If you need to, go back to that lesson and review the following
<img> element syntax
The src and alt
Where we keep a web site's images files (the /images directory)
Also, make sure you've gone through the section on
Absolute vs. Relative Paths
so you understand how to create correct absolute or relative
paths. You should also understand what hotlinking is
and when/why it should be avoided.
In HTML there are two semantic elements we can use to
display images in certain circumstances:
the <figure> and <figcaption>
elements. These elements are not used only for images, though:
they are used to display "self-contained content" with a caption,
such as images, charts and graphs, a text or code sample, etc.
The content is displayed with the figure element
and the content's caption is displayed with the figcaption
The <figure> element should contain the element/object you
want to display (such as an <img> element).
Think of a figure like the figures you'd find in a textbook:
You might be reading a textbook and throughout a chapter, you
would read about references to certain diagrams or examples.
A figure is a piece of supplemental content that helps the reader
understand and visualize what is being explained/discussed in the
text. Figures can be placed anywhere in the text and not necessarily
next to the text that is discussing the figure. For example,
a piece of text might say "There is a different chi-square curve
for each df, see Figure 11.2" and the reader could scroll
or page through the document/book to find Figure 11.2.
In some texts, figures are placed at the end of a book, like an
appendix. The idea is that a figure can be placed anywhere in
the document or book without affecting a user's ability to read,
understand, and use the content. If you have to flip to the back
of the book to find Figure 11.2 while you keep a finger on the page
you were reading so you know where to go back, that's fine! You're
still able to read and understand the content of the textbook
and receive the benefit of the visualization displayed in the
When do you NOT need to use a <figure> element?
If an image is decorative, such as a coloured icon used for bullets
in a bulleted list, a company logo or page banner, you shouldn't
use a figure. If an image is required to be next to a part of the
content, you should not use a <figure> element. For example,
when you view a product on Amazon, the picture(s) of the product
are right at the top, under the name of the product and above
the product's price, the buttons to add to cart/wishlist, etc.
If the product image were to be placed at the end of the page,
this would annoy the customer: the product image is part of the
product's information and description, and we like to see the
image along with the price, description, etc to simulate an
in-person shopping experience (you don't walk into a store and
see text description of products that you then have to go into
another area to look at).
The <figcaption> element is used to add a caption to the
figure. The <figcaption> is nested inside the <figure>
element, and usually under the object being displayed.
The figure caption can contain a description of the figure
(like I did with the graphs example up above) or something
simple like "Figure 11.2".
Here's the code I used for the example up above:
alt="a figure that has 2 line graphs with a caption Figure 11.2; above and below the figure is text related to the figure">
<figcaption>A example of a figure from a textbook
target="source">source</a> Introductory Statistics by Barbara Illowsky and
Susan Dean)<br>(by the way, this example is displayed using
the <figure> and <figcaption> elements: right-click/Inspect
the image to see)</figcaption>
Notice that the <img> and <figcaption> are indented, because they are
nested inside the <figure> element.