Img tag in HTML

The previous article you read with Taimienphi.vn learn about link in HTML. In the next article below, Taimienphi.vn will introduce you more about the img tag in HTML.

Img tag in HTML

1. The img tag in HTML

In HTML, images are indicated by tags img.
Card img is a blank tag, contains only attributes and no closing tags.
Properties src Specify the URL (website address) of the image:

1.1 alt attribute

Properties alt specify text to replace the image if the image is not displayed (due to a slow connection, an error in the src attribute, or if the user uses a screen reader).
The value of the alt attribute will describe the image.
Example 1: Here is an example of the alt attribute in HTML:

The output 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 following example illustrates how the browser displays the alt attribute value in case the image cannot be found:

The output will look like the following:

Note: The alt attribute is required The site will display an error if this attribute is not available.

1.2 Resize images in HTML

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

The output will look like the following:

We can also use attributes width and Cao.
Example 2: In this example we use the width and height attributes to specify the width and height of the image in HTML:

The output will look like the following:

Note:
– The width and height attributes in HTML always specify the width and height of the image in pixels.
– We must specify the width and height of the image. If width and height are not specified, the website may crash when loading images.

1.3 Using width, height or style?

The width, height and style properties are all valid attributes in HTML.
However, Taimienphi.vn recommends that you use the style attribute to prevent the stylesheets from resizing images.
For example: The following example illustrates how styles sheets resize images in HTML:

The output will look like the following:

1.4 Store images in another folder

If not specified, the browser will search for images in the same directory as the web page.
However, to store images in a subfolder, we must add the folder name in the property src.
For example: The following example illustrates how to store images in subfolders in HTML:

The output will look like the following:

1.5 Store images on another server

Some websites host images on image servers. However, in reality we can access images from any web address.
For example: In the example below the image is hosted on another server:

The output will look like the following:

1.6 GIF animations in HTML

HTML also allows GIF animation.
For example: The following example illustrates GIF animation in HTML:

The output will look like the following:

1.7 Use images as links (links)

To use images as links in HTML, we place tags img inside the card a.
For example: The following example illustrates how to use images to make links in HTML:

The output will look like the following:

Note: We add border: 0; to prevent IE9 and earlier versions from displaying borders around images.

1.8 Adjust image position in HTML

In HTML, we use attributes float to adjust the image position to the right or to the left of the text (text).
For example: In the example below we will use the float attribute to adjust the image on the right and left side of the text:

The output will look like the following:

1.9 Image Map in HTML

Card map Used to specify image-map in HTML. image-map is the image with clickable parts.
For example: Here is an example of an image map in HTML:

The output will look like the following:

Properties name of cards map is associated with the property usemap of cards img and create relationships between images and maps.
Element map Contains a number of tags area, used to specify clickable areas in image-map.

1.10 Background image for an HTML element

To add background image for the HTML element, we use the attribute background-image in CSS.

Example 1: Add background image on web page, specify background-image attribute in BODY element:

The output will look like the following:

Example 2: Add a background image on the text, specify the background-image attribute in element P:

The output will look like the following:

1.11 Picture element in HTML

In HTML5, an element is added picture to improve the flexibility when specifying image resources.
Element picture contains some elements source, Each element references different image sources. This way the browser can choose the image that best suits the viewing mode and on different devices.
Each element source contains descriptive attributes if the image is considered to be the most relevant.
The browser will use the element source first with the appropriate attribute values ​​and ignore the elements source next.
For example: The following example illustrates how to use the element picture in HTYM:

Outputs when applying element picture Look like this:

Note: We must specify the element img is the last child of the element picture. The browser does not support the element picture or if not possible source Whichever match will use the element img.

2. Summary

– Using element img in HTML to specify images.
– Use properties src in HTML to specify the URL of the image.
– Use properties alt in HTML to specify alternative image text in case if the image is not displayed.
– Use properties width and Cao in HTML to specify the image size.
– Use properties width and Cao in CSS to specify image sizes.
– Use properties float in HTML to adjust image position.
– Using element map to specify image-map.
– Using element area to specify the clickable area in the image-map.
– Use properties usemap of the element img in HTML to point to image-map.
– Using element picture to display different images on different devices.

2.1 The img tag in HTML

Below is a list of cards img in HTML:

https://thuthuat.taimienphi.vn/the-img-in-html-50617n.aspx
The article above Taimienphi.vn has just introduced you about img tag in HTML. In addition, if you have any questions or questions, you can leave your comments in the comment section below the article so you can learn HTML better. In the next article, Taimienphi.vn will introduce you further tables in HTML Please.