HTML img Tag

In the previous article, Mytour readers delved into HTML links. In this subsequent piece, Mytour continues to introduce you to the HTML img tag.

HTML img Tag
 

1. HTML img Tag

In HTML, images are specified using the img tag.
The img tag is an empty tag, containing only attributes and no closing tag.
The src attribute specifies the URL (web address) of the image:

1.1 alt Attribute

The alt attribute specifies alternative text for an image in case the image fails to display (due to a slow connection, an error in the src attribute, or if users use screen readers).
The value of the alt attribute will describe the image.
Example 1: Below is an example of the alt attribute in HTML:

The output result returned after applying the alt attribute looks like this:

If the image cannot be found, the browser will display the value of the alt attribute.
Example 2: The example below illustrates how the browser displays the alt attribute value in case the image is not found:

The output result appears as follows:

Note: The alt attribute is mandatory. The website will display an error if this attribute is missing.

1.2 Resizing Images in HTML

We can use the style attribute to specify the width and height of an image.
Example 1: In the example below, we use the style attribute to specify the width and height of an image in HTML:

The output result appears as follows:

In addition, we can utilize the width and height attributes.
Example 2: In this example, we use the width and height attributes to specify the dimensions of an image in HTML:

The output result looks like the following:

Note:
- The width and height attributes in HTML always specify the image dimensions in pixels.
- It's crucial to define the width and height of the image. Failure to do so might result in errors when loading the image on the website.

1.3 Using width, height, or style attribute?

The attributes width, height, and style are all valid attributes in HTML.
However, Mytour recommends using the style attribute to prevent style sheets from altering the image size.
Example: The following example illustrates how style sheets can change the image size in HTML:

The output result looks like the following:

1.4 Storing Images in a Different Directory

If not specified, the browser will look for images in the same directory as the website.
However, to store images in a subdirectory, we need to add the directory name in the src attribute.
Example: The example below illustrates how to store images in a subdirectory in HTML:

The output result looks like the following:

1.5 Storing Images on a Different Server

Some websites store images on an image server. However, in reality, we can access images from any web address.
Example: In the example below, the image is stored on a different server:

The output result looks like the following:

1.6 Animated GIFs in HTML

HTML also allows for animated GIFs.
Example: The following example illustrates an animated GIF in HTML:

The output result looks like the following:

1.7 Using Images as Links

To use an image as a link in HTML, we place the img tag inside the a tag.
Example: The following example illustrates how to use an image as a link in HTML:

The output result looks like the following:

Note: We add border:0; to prevent IE9 and earlier versions from displaying a border around the image.

1.8 Adjusting Image Position in HTML

In HTML, we use the float property to adjust the position of an image to the right or left of the text.
Example: In the following example, we use the float property to position the image to the right and left of the text:

The output result looks like the following:

1.9 Image Map in HTML

The map tag is used to specify an image map in HTML. An image map is an image with clickable regions.
Example: Here is an example of an image map in HTML:

The output result looks like the following:

The name attribute of the map tag is linked to the usemap attribute of the img tag, creating a relationship between the image and the map.
The map element contains several area tags, used to define clickable areas within the image map.

1.10 Background Image for HTML Elements

To add a background image to an HTML element, we use the background-image property in CSS.

Example 1: Add a background image to a webpage by specifying the background-image property in the BODY element:

The output result looks like the following:

Example 2: Add a background image to a paragraph, specifying the background-image property in the P element:

The output result looks like the following:

1.11 The picture Element in HTML

In HTML5, the picture element is introduced to enhance flexibility when specifying image resources. The picture element contains multiple source elements, each referring to different image sources. This way, the browser can choose the most suitable image based on viewing modes and various devices.

The output result when applying the picture element looks like the following:

Note: We must specify the img element as the last child of the picture element. If the browser doesn't support the picture element or if there's no matching source, it will use the img element.

2. Summary

- Utilize the img element in HTML to specify images.
- Use the src attribute in HTML to specify the URL of the image.
- Use the alt attribute in HTML to specify alternative text for the image in case it doesn't display.
- Use the width and height attributes in HTML to specify the dimensions of the image.
- Use the width and height attributes in CSS to specify the dimensions of the image.
- Use the float attribute in HTML to adjust the position of the image.
- Use the map element to specify an image map.
- Use the area element to define clickable areas in the image map.
- Use the usemap attribute of the img element in HTML to reference the image map.
- Use the picture element to display different images on different devices.

2.1 The img Element in HTML

Here is a table listing the img element in HTML:

In this article, Mytour has just introduced you to the img tag in HTML. If you have any concerns or questions that need clarification, readers can leave their comments below the article to enhance their HTML knowledge. In the next article, Mytour will continue to introduce you to tables in HTML. Stay tuned!