Adding Media - Learn to Code HTML and CSS: Develop and Style Websites - page 182

Figure 9.6 An image styled to appear within a frame and floated to the right of its con-
taining element
When to Use an Image Element vs. a Background Image
There are two primary ways to add images to a web page. One way, as covered
here, is to use the <img> element within HTML. Another way is to use the
background or background-image property within CSS to assign a back-
ground image to an element. Either option will do the job; however, they each
have specific use cases.
The <img> element within HTML is the preferred option when the image being
used holds semantic value and its content is relevant to the content of the page.
The background or background-image property within CSS is the pre-
ferred option when the image being used is part of the design or user interface of
the page. As such, it's not directly relevant to the content of the page.
The <img> element is quite popular, and when it was originally added to the HTML spe-
cification it forever changed the way websites were built.
In Practice
Now that we know how to add and position images on a page, let's take a look at our Styles
Conference website and see where we can add a few images.
1. Let's begin by adding some images to our home page. Specifically, we'll add an
image within each of the teaser sections promoting a few of our pages.
Before we jump into the code, though, let's create a new folder named “images”
within our “assets” folder. Then, within the “images” folder, let's create another
folder named “home” specifically for our home page images. Within the “home”
folder we'll add three images: speakers.jpg , schedule.jpg , and ven-