Summary -
In this topic, we described about the below sections -
Images are very useful to present the concepts in a simpler way of representation. HTML Images are used to display images on the pages. HTML Images represented with <img> tag. The <img> tag is also called as empty tag, which means it will not have any closing tag.
The <img> tag can contain only attributes which plays very important role in displaying the image on browser. Animated images can also display by using same <img> tag. There is no difference in representation of normal images and gif images.
Syntax -
<img src="url" alt="img_text">
The below list of attributes plays key roles in displaying the image on webpage.
- Src
- Alt
- Size
- Style
Src Attribute -
Source attribute specifies the URL of the image. In other words, it always provides the information to browser where the current image can be found. This is mandatory attribute to display image.
<img src="url">
The source can be different for an image. Let us assume we have coded image as img.png, the below listed are the different possible scenarios.
- Image on the same folder on the same server.Ex: <img src="img.png">
- Image on different folder at below level on the same server.Ex: <img src="subfolder/img.png">
- Image on the different folder upper level on the same server.Ex: <img src="../upfolder/img.png">
- Image on different server.Ex: <img src="images/img.png">
Alt Attribute -
The Alt text specifies the alternative text/description. This will display if the specified images failed to load. This text/description can be used in only when the images failed to load due to some connectivity issues or screen reader used. This is mandatory attribute.
Syntax -
<img src="url" alt="img_text">
Lets take above example to understand the same. Ex: <img src="Logo.png" alt="Logo Image"> In the above example, the Logo Image will be displayed if the logo.png can’t able to load due to any issue.
Size Attribute -
The Size attribute is a combination of Width and Height. The height is the length in vertical direction. The Width and Height attributes can be used to replace the job of Style attribute.
Syntax -
<img src="logo.png" alt="Logo Image" width="XX" height="YY">
In the above case, pixels are not required along with width and height values. By default, It will take the value as pixels.
Style Attribute:
The style (Size) attribute can be used to specify the width and height of the image. This is an optional attribute. If the Size attribute not provided, browser will calculate the size of the image during the run time.
The runtime size calculation may leads to the disturbance in alignments in display. The values can be specified in pixels (px).
Syntax -
<img src="logo.png" alt="Logo Image" style="width:XXpx;height:YYpx;">
In the above, the width can be the length of the image in horizontal direction. The height is the length in vertical direction. The Width and Height attributes can be used to replace the job of Style attribute.
Required Attributes -
| Attribute | Description | Values |
|---|---|---|
| src | Specifies the Image location. | URL. |
Optional Attributes -
| Attribute | Description | Values |
|---|---|---|
| align | Specifies the alignment of the <img>Not supported in HTML5 | |
| alt | Specifies the alternative text when image tag is notsupported by browser or image URL not specified properly. | |
| border | Specifies the border for image.Not supported in HTML5 | |
| crossorigin | Used to handle Cross Origin Resource Sharing requests.HTML5 attribute | |
| height | Specifies the height of the image | |
| ismap | Specifies the image used as a server-side image map. | |
| longdesc | Specifies the source which can describe about the image | |
| usemap | Specifies the image as a server image map name. | |
| width | Specifies image width. |
Example -
<!DOCTYPE html>
<html>
<head>
<title>Img tag example</title>
</head>
<body>
<img src="img/header-logo.png" height="250" width="250" />
</body>
</html>
Output -
