Scribd
Upload
47 views

HTML Image Tag and Its Attributes

Uploaded by

ishitaasharma2
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
47 views

HTML Image Tag and Its Attributes

Uploaded by

ishitaasharma2
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 8

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.

You might also like