Most images are placed on web pages using the <img> element. The <img> tag is the likely the first you’ve encountered that does not have a matching closing tag. This makes sense, since everything about an image is specified by the tag’s own attributes; the element doesn’t “enclose” anything, and the image tag is its own content.

<img>

By itself, the <img> element does nothing. Just as the <a> element needs an href attribute in order to work as a link, the <img> tag needs a src attribute to display a picture:

<img src="ramesses.jpg">

(Note that the example above assumes that the ramesses.jpg file is in the same location as the HTML page that uses it.)

A very important addition to the <img> tag is the alt attribute, which should be specified as soon as you insert the image into your web page, just as you should specify the title of a document as soon as you create it:

<img src="ramesses.jpg" alt="Profile of an alabaster statue of Ramesses II with a turbanned guard sitting behind it">

It's usually easiest to think of an image as an illustration for text content, so in most cases an image should be inserted beside or near related text. Images may be captioned using the <figure> and <figcaption> elements, and are positioned using CSS.

If an image is used on a page for pure decoration and has no meaning, it should probably be displayed as a background-image in CSS.

Illustration edited from an original photograph by Lars Plougmann, under a Creative Commons Attribution-ShareAlike 2.0 Generic license.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.