Do you think IIT Guwahati certified course can help you in your career?
No
Introduction
Welcome, Ninjas! Do you know how to use an image in your webpage? What if you want to alter its properties? The <img> tag in HTML helps us to add images to our webpage, and its various HTMLimgattributeshelp alter the image's properties.
This article will discuss the HTML img tag and its features and properties. We will also discuss the implementation of various html img attributes. Let us get started!
What is <img> Tag in HTML?
The <img> tag in HTML is used to add images to web pages. The <img> tag in HTML doesn’t have a closing tag. It is a self-closing tag. The <img> is an inline element of HTML. Two attributes are required in the img tag - src and alt.
Syntax of <img> Tag
Basic Syntax:
<img src="image-URL" alt="alt-text">
Where,
src specifies the source of the image,
alt specifies the alternate text you want to display on the screen if there’s an error in loading the image.
Both src and alt are required attributes of the <img> tag.
Features and Properties of HTML <img> Tag
The <img> tag has various features and properties. Some of its features and properties are listed below.
The <img> tag can be used to make an image a hyperlink with the help of <a> tag.
Almost all browsers support it.
The <img> tag has various attributes like src, alt, height, width, etc.
Let us now look at various HTML img attributes.
HTML image Tag Attributes
There are several img attributes in HTML, and some of them are mentioned below:
Attribute Name
Description
Syntax
src
The src attribute of the <img> tag specifies the URL of the image to be displayed. The src attribute allows the browser to locate the image file. The URL can either be a relative or an absolute path.
<img src="image-URL">
alt
The alt attribute of a <img> tag is used to display some text or information when the image cannot be displayed. It is the alternative text to an image.
<img src="image-URL" alt="alt-text">
height
The height attribute of the <img> tag specifies the height of the image. It is given in pixels.
The style attribute is used as a shortcut to use CSS for an image. The style attribute can give the image a border, padding, margin, etc. Style attribute makes the image look more appealing.
Let us try to implement several attributes which we have discussed above.
src attribute
The image src is specified as per the location of the image in the respective folder. For example, we can normally mention the file name if it is in the same folder. But, if it is present in another folder, its relative path is specified.
If the image doesn’t load up for any reason, it displays the text mentioned in the alt attribute. Specifying relevant text in the alt attribute that describes the image is suggested.
The alt attribute for a <img> tag is used to give the text description of that image. They are provided for systems having slow internet speed or browsers that do not support images.
How to code an image in HTML?
To code an image in HTML and make it an H3 element, use the <img> tag within the <h3> tags, like this: <h3><img src="image.jpg" alt="Description"></h3>.
How many image tags are in HTML?
There is only one image tag in HTML, which is <img>. It is a self-closing tag used to embed images into a webpage.
What is an example of an img tag?
An example of an <img> tag in HTML is: <img src="image.jpg" alt="Description">. This code embeds an image named "image.jpg" with the alternative text "Description".
What is data IMG in HTML?
Data IMG in HTML refers to embedding images directly into the HTML document using Base64 encoding. It's done like this: <img src="data:image/png;base64,Base64EncodedImageData" alt="Description">.
Conclusion
In this blog, we discussed the <img> tag in html along with its features and properties. Implementation of various HTML <img> tag is also illustrated.
If you found this blog interesting and insightful, refer to similar blogs: