When a person is creating a web page that contains an image, the image is not actually inserted into the page with the rest of the information. To display images on the web, an HTML image link is used instead of embedding the image within the page. To use the HTML image link, the <img> HTML tag is used to provide the information for where the image is stored and can be accessed. This tag can be used with all browsers and can be used to load all image types that are supported by the browsers.
Using the <img> tag alone provides no information to the web page that is meant to contain an image. There are two attributes that are required for the HTML image link to be written correctly so that the image loads when the web page loads. There are also several optional attributes that can be included to provide further information. The attributes that are required to write the image link are src and alt.
The src attribute of the HTML image link provides the web address, or URL, where the image is located. The URL can take one of two forms. An absolute URL provides a complete web address that directs to an image on another website. An example of including an absolute URL for the src attribute would be: src="http://www.website.com/image.jpg" — where website.com is pointing to another site and image.jpg is pointing to a specific image.
The other option for the URL within the src attribute is to write a relative URL. In the case of a relative URL, the web address is providing a link to an image within the same website directory. The relative URL is a truncated version of an absolute URL as the image is located in the same place as the web page. Examples of the src attribute with a relative URL are: src="image.jpg" or src="images/image.jpg". The only difference in these examples is where the image is located, as it is located within an images folder in the second example.
The other required attribute is alt, which provides alternate text for the image. This is not text that is displayed if a user hovers a mouse over the image, but text that is displayed if the image cannot be displayed for some reason. There are many reasons why an image may not be displayed, including cases in which the URL in the src attribute is incorrect or broken, or when a user who has a visual impairment is using a screen reader.
The most basic code for an HTML image link will look something like the following: <img src="URL" alt="text" />. Since the <img> tag does not have an end tag, it is important to end it with /> so that the browser knows that the instruction has ended. The src attribute points to a location for an image, so it is important to make sure that links to other sites are not broken and that images are not moved around within a website directory, and to correct links when problems do occur.