Lesson Overview

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 things:

• <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.

Figures

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 element.

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 figure.

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:

<figure>
  <img src="images/figure_statsTextbookExample.png" 
    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 
  (<a href="https://openstax.org/books/introductory-statistics/pages/1-introduction"
    target="source">source</a> Introductory Statistics by Barbara Illowsky and 
    Susan Dean)<br>(by the way, this example is displayed using 
    the &lt;figure> and &lt;figcaption> elements: right-click/Inspect 
    the image to see)</figcaption>
</figure>

Notice that the <img> and <figcaption> are indented, because they are nested inside the <figure> element.