Beginning HTML5 and CSS3 For Dummies
Book image
Explore Book Buy On Amazon

Images in websites may be logos or clickable navigation aids, or they may display content; they can also make a page look prettier or serve to unify or illustrate a page’s theme. The image (

) element is an empty element (sometimes called a singleton tag) that enables you to specify the place on the page where you want your image to go.

An empty element uses only one tag, with neither a distinct opening nor a distinct closing tag.

The following markup places an image named 07fg02-cd.jpg, which is saved in the same directory as the (X)HTML file, between two paragraphs:

<!DOCTYPE html>
  <meta charset="UTF-8">
   <title>Optical Disks at Work</title>
  <h1>CD/DVD as a Storage Medium</h1>
  <p>CD-ROMs and DVDs have become a standard storage option in today's computing 
     world because they are inexpensive and easy to use.</p>
  <img src="09fg02-cd.jpg" alt="line drawing of optical disk">
  <p>To read from a CD or DVD, you only need a standard CD-ROM drive, but to 
     create CDs or DVDs, you need a DVD burner (all DVD burners can read 
     and write CDs as well).</p>

A web browser replaces the img element with the image file provided as the value for the src attribute, as shown in the figure.


The src attribute is like the href attribute that you use with an anchor () element. The src attribute specifies the location for the image you want to display on your page. The preceding example points to an image file in the same folder as the HTML file referencing it.

About This Article

This article is from the book:

About the book authors:

Ed Tittel is a 30-year veteran of the technology industry with more than 140 computing books to his credit, including the bestselling HTML For Dummies.

Chris Minnick runs Minnick Web Services. He teaches, speaks, and consults on web-related topics and has contributed to numerous books, including WebKit For Dummies.

This article can be found in the category: