An HTML image link is used to display images on a web page by providing the URL of the image in the src attribute and alternative text in the alt attribute. Absolute and relative URLs can be used, and it’s important to ensure links are not broken or images moved within a website directory.
When a person creates a web page that contains an image, the image is not actually placed on the page with the rest of the information. To view images on the web, a link to the HTML image is used instead of embedding the image within the page. To use the HTML image link, the HTML tag is used to provide the information about where the image is stored and where it can be accessed. This tag is cross-browser friendly and can be used to load all browser-supported image types.
Using the tag alone does not provide information to the web page that it should contain an image. There are two attributes needed to correctly write the HTML image link so that the image loads when the web page loads. There are also several optional attributes that can be included to provide more information. The attributes needed to write the image link are src and alt.
The HTML image link’s src attribute 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 points 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 points to another site and image.jpg points 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 provides a link to an image within the same directory as the website. The relative URL is a truncated version of an absolute URL because the image is in the same location 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 inside an image folder in the second example.
The other required attribute is alt, which provides alternative text for the image. This is not the text that appears if a user hovers over the image, but the text that appears if the image cannot be displayed for some reason. There are many reasons why an image may not display, including cases where the URL in the src attribute is incorrect or malfunctioning, or when a visually impaired user is using a screen reader.
The basic code for an HTML image link would look like this: . Since the tag doesn’t have an end tag, it’s important to end it with an /> so the browser knows that the statement is finished. The src attribute points to a location for an image, so it’s important to make sure links to other sites aren’t broken and images aren’t moved within a website directory, and fix links when problems arise .
Protect your devices with Threat Protection by NordVPN