Using HTML Images

Images are a key part of the World Wide Web, and luckily they are very easy to insert using HTML. To insert an image you need to use the HTML img tag. Within the img tag you need to specify the filename of the image you want to load; this goes in the src attribute (short for source). Because the img tag does not surround any text we need to combine the opening and closing HTML tags into one tag, as shown:

<img src="filename.jpg" />

This will load and display the image called filename.jpg.

Another useful attribute is the alt attribute, which allows us to set alternate text for users who can't view images, or people who have disabled image viewing for their web browser. The alt attribute should be used to describe the contents of the picture, for the benefit of those who can't see it. This is a required attribute so you should use it for all of your images.

You can also use the title attribute to add additional information about an image. An image's title will be displayed if the user hovers over the image for a short while. title differs from alt in that alt should be used to describe the contents of the image while title should be used to give further information.

An example of a full HTML img tag would be as follows:

<img src="football.jpg" alt="A football player" 
title="Football is a popular sport played around the world" />

As well as attributes to give further information about an image, we can also use the width and height attributes to set the picture dimensions. This can be useful for people with slow internet connections. If we did not set the width and height of the image then the page layout and text would continue to shift around the web page while the images were still loading. By using the width and height attributes the browser can reserve the correct amount of space on the page in advance. These attributes are optional and are becoming less necessary as internet connection speeds increase, but it can still be good practice to use them.