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