Overview

Images are essential to any good website. In this lesson we will learn how to add an image using the HTML img tag.

<img> Tags

We can insert an image into a web page using an <img> tag. This tag requires a src attribute. You can think of this as the source of the image, which is generally a relative URL, if the image is stored within your site files, or an absolute URL, if the image is hosted on another site. In the example below, we see a relative URL, since the image is hosted on this site.

<img src="wp-content/uploads/2020/05/baby-wombat.jpg" width="360" height="240" alt="A baby wombat in the grass" />

Width and Height

You’ll want to specify a width and height for the image. These days, image dimensions are usually set using CSS in order to create responsive images (images that size differently based on the user’s screen dimensions). Since this is an HTML lesson, we’ll stick with the width and height attributes. Notice the code for the image above. The width attribute has a value of 360 and the height has a value of 240. This sets the image at 360 pixels wide and 240 pixels tall.

Alternate Text

The alt attribute should be included in every img tag. It provides alternative text in the case that the image does not load or the person is using a screen reader. In the example below, the src value for the image is incorrect. As a result the image is unable to load. Notice the alt text that appears instead.

<img src="wp-content/uploads/2020/05/baby-wombat5.jpg" width="360" height="240" alt="A baby wombat in the grass" />