Use the <img> Element to Place Images

By Ed Tittel, Chris Minnick

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 (<img>) 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>
<html>
<head>
  <meta charset="UTF-8">
   <title>Optical Disks at Work</title>
</head>
  <body>
  <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>
  </body>
</html>

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

image0.jpg

The src attribute is like the href attribute that you use with an anchor (<a>) 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.