HTML’s Image
Tag and its
Attributes
What is Image tag ?
Image tags are an integral part of web development. It is
used to embed images within a web page. This element is
responsible for displaying images on your website. It doesn’t
have a closing tag, meaning it's a self-contained tag
Key Attributes
1 src (source) 2 alt (alternative text)
Specifies the URL or Provides alternative
path to the image file. text for screen readers
and browsers that
cannot display
images.
3 width & height 4 title
Sets the width and Provides a tooltip that
height of the image in appears when the
pixels. mouse hovers over
the image.
src Attribute
Image Source Example
The src attribute is essential for telling the <img src="https://example.com/image.jpg"
browser where to find the image file. This could be alt="Image Description">
a local file path or a URL.
alt Attribute
Accessibility
The alt attribute ensures that images are
accessible to users who rely on screen readers
or if the image fails to load.
Example
<img src="image.jpg" alt="A beautiful sunset
over the ocean">
Width and Height Attribute
Attribute Description Example
width Sets the width <img
of the image in src="image.jpg
pixels or " width="300">
percentages.
height Sets the height <img
of the image in src="image.jpg
pixels or "
percentages . height="200">
Title Attribute
1 Accessibility
It can be helpful for screen readers and users
who need more context about the image.
2 Example
<img src="image.jpg" title="A stunning
mountain range">
Conclusion
The <img> tag in HTML adds images to a web page and uses attributes to
specify the image source, describe it, set its size, and provide additional
information
Display Describe
Embed and show an image on Offer an accessible description
your web page using the src for those who can’t view the
attribute image with the alt attribute.
Size Inform
Adjust the image’s dimensions Provide additional information
with width and height. that appears as a tooltip when
users hover over the image
with the title attribute.
