The <img> tag in HTML is used to embed images in a web page. The <img> tag is a self-closing tag, which means that it does not require a closing tag, and has several attributes that can be used to control the appearance and behavior of the image. HTML img Tag
Syntax for HTML images:
<img src="url" />
- The <img> tag defines an HTML image.
- The src attribute defines the image source, i.e. URL or file path.
- Additional image attributes are listed further down below.
Example
<img src="image.jpg" alt="dog" width="500" height="300">
In this example, the “src” attribute is used to specify the URL or file path of the image, the “alt” attribute is used to provide a text description of the image for accessibility, the “width” attribute is used to specify the width of the image in pixels and the “height” attribute is used to specify the height of the image in pixels.
The “src” attribute is mandatory, it is used to specify the source of the image. The “alt” attribute is also a required attribute, it is used to provide alternative text for the image in case the image is not loaded.
You can also use the “style” attribute to control the layout and formatting of the image.
<img src="image.jpg" alt="dog" style="width: 500px; height: 300px; border: 1px solid black;">This example uses inline styles to set the width, height, and border of the image.
It’s also important to note that it’s a good practice to use <figure> and <figcaption> tags to wrap the <img> tag in order to provide a semantic meaning to the image and to give a caption to it.
We have some Attributes for img tag they are:
Attributes
| Attribute | Value | Description |
|---|---|---|
| alt | text | Specifies an alternate text for an image |
| width | pixels | Specifies the width of an image |
| height | pixels | Specifies the height of an image |
| sizes | sizes | Specifies image sizes for different page layouts |
| src | URL | Specifies the path to the image |
Let’s us discuss each of them in detail.
1.alt
The alt attribute specifies an alternate text for an area, if the image cannot be displayed. The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).
EXAMPLE:
<h2>alt attribute Example</h2>
<img src="baby.jpg" alt="baby image"/> 2. Width & Height
Width is used to specify the width to display the image. It is not recommended now. You should apply CSS in place of width attribute.
The HTML height attribute also supports iframe, image and object elements. It is not recommended now. You should apply CSS in place of height attribute.
EXAMPLE:
<img src="animal.jpg" height="180" width="300" alt="animal image"> 3. src HTML img Tag
The src attribute that describes the source or path of the image. It instructs the browser where to look for the image on the server.
The location of image may be on the same directory or another server.
EXAMPLE:
<img src="E:/images/baby.png" height="180" width="300" alt="baby image">
- The <img> tag in HTML is used to embed images in a web page.
- The alt attribute specifies an alternate text for an area, if the image cannot be displayed.
- Width and height is used to specify the width to display the image.
- The src attribute that describes the source or path of the image.
HTML img Tag HTML img Tag