HTML Elements: Imag Tag ,Attributes, and Usage
Table of Contents
Imag Tag
The HTML imag tag <img> tag is an HTML element used to insert images into a webpage. It does not have a closing tag and is considered a self-closing tag. The <img> tag requires the src attribute, which specifies the path or URL of the image file to be displayed.
How to use HTML img Tag?
Here’s a complete code example demonstrating the use of the HTML imag tag <img> tag:
<!DOCTYPE html> <html> <head> <title>Image Tag </title> </head> <body> <h1>HTML imag tag </h1> <img src="gogoacademy.png" alt="Description of the image"> </body> </html>
In the above example:
1-The src attribute specifies the path or URL of the image file. Replace ” gogoacademy.png ” with the actual path or URL of your image.
2-The alt attribute provides alternative text that is displayed when the image cannot be loaded or for accessibility purposes.
Replace “Description of the image” with a descriptive text describing the image.
3-The <img> tag can also include other optional attributes, such as width, height, title, and class, to further control the display and behavior of the image.
Some of with additional attributes:
<img src=" gogoacademy.png " alt="Description of the image" width="300" height="200" title="Image Title" class="image-class">
In the above example:
1-The width and height attributes specify the dimensions of the image in pixels.
2-The title attribute provides a tooltip text that appears when the user hovers over the image.
3-The class attribute assigns a CSS class to the image, allowing you to style it using CSS rules.
Remember to replace “image.jpg” with the actual path or URL of your image and customize the attributes according to your specific needs.
The Output:
Uses of HTML img tag
The <img> tag is primarily used to display images on a webpage. Here are a few common use cases and complete code examples:
Displaying an Image from the Local File System
Example:
<!DOCTYPE html> <html> <head> <title>Image Example</title> </head> <body> <h1>HTML imag tag</h1> <img src="path/to/gogoacademy.png " alt="Description of the image"> </body> </html>
In this example, replace “path/to/gogoacademy.png ” with the actual file path of the image on your local file system.
Displaying an Image from a URL
Example
<!DOCTYPE html> <html> <head> <title>Image Example</title> </head> <body> <h1>HTML imag tag</h1> <img src="#" alt="Description of the image"> </body> </html>
In this example, replace [“https://example.com/gogoacademy.png “] with the actual URL of the image you want to display.
Displaying an Image with Alternative Text and Dimensions
Example:
Displaying an Image with a Tooltip
Example:
<!DOCTYPE html> <html> <head> <title>Image Example</title> </head> <body> <h1>HTML imag tag</h1> <img src="gogoacademy.png " alt="Description of the image" title="Image Title"> </body> </html>
In this example, the title attribute provides a tooltip text that appears when the user hovers over the image.
These examples demonstrate different uses of the <img> tag to display images on a webpage. Customize the src, alt, width, height, and title attributes as per your specific image and requirements.
Attributes of HTML img tag with complete code example
The <img> tag has several attributes that can be used to customize the behavior and appearance of the image.
Here are some commonly used attributes along with a complete code example:
<!DOCTYPE html> <html> <head> <title>Image Example</title> </head> <body> <h1>Image Example</h1> <img src="gogoacademy.png " alt="Description of the image" width="300" height="200" title="Image Title" class="image-class"> </body> </html>
In this example, the <img> tag includes the following attributes:
src: Specifies the source URL or path of the image.
Example: src=” gogoacademy.png “
alt: Provides alternative text for the image. It is displayed if the image cannot be loaded or for accessibility purposes.
Example: alt=”Description of the image”
width: Sets the width of the image in pixels.
Example: width=”300″
height: Sets the height of the image in pixels.
Example: height=”200″
title: Adds a tooltip text that appears when the user hovers over the image.
Example: title=”Image Title”
class: Assigns a CSS class to the image, allowing you to apply specific styles using CSS rules.
Example: class=”image-class”
These attributes can be combined to control the source, dimensions, tooltip, and styling of the image.
Quiz about HTML imge tag with answers
Here’s a multiple-choice quiz about the <img> tag:
1-Which attribute is used to specify the source URL or path of an image in the <img> tag?
a) src
b) alt
c) width
d) height
[Answer: a]
2-What is the purpose of the alt attribute in the <img> tag?
a) It sets the width of the image.
b) It specifies the source URL or path of the image.
c) It provides alternative text for the image.
d) It adds a tooltip to the image.
[Answer: c]
3-Which attribute is used to define the width of an image in the <img> tag?
a) src
b) alt
c) width
d) height
[Answer: c]
4-What is the function of the title attribute in the <img> tag?
a) It sets the width of the image.
b) It specifies the source URL or path of the image.
c) It provides alternative text for the image.
d) It adds a tooltip to the image.
[Answer: d]
5-Which attribute is used to assign a CSS class to an image in the <img> tag?
a) class
b) id
c) style
d) src
[Answer: a]
6-Which attribute is used to specify a fallback image source if the original source fails to load?
a) src
b) alt
c) fallback
d) placeholder
[Answer: b]
7-What is the purpose of the loading attribute in the <img> tag?
a) It specifies the image format.
b) It sets the alignment of the image.
c) It defines the loading behavior of the image.
d) It applies a specific filter to the image.
[Answer: c]
8-Which attribute is used to provide a long description of the image for screen readers?
a) alt
b) title
c) longdesc
d) aria-label
[Answer: c]
9-What does the decoding attribute in the <img> tag control?
a) The image’s color profile.
b) The image’s transparency settings.
c) The image’s decoding process.
d) The image’s aspect ratio.
[Answer: c]
10-Which attribute is used to define a clickable area within the image map?
a) src
b) usemap
c) ismap
d) coords
[Answer: d]