The <img> tag in HTML is used to embed images into a webpage. It is an empty tag, meaning it doesn't have a closing tag and is typically self-contained. The <img> element is used to display images like JPEGs, PNGs, GIFs, and more.
Basic Syntax
<img src="image.jpg" alt="Description of the image">
Attributes of img tag
1. src: Specifies the path to the image you want to display. The value can be a relative URL (e.g., "images/photo.jpg") or an absolute URL (e.g., "https://my-images.com/photo.jpg").<img src="img/tree.jpeg">2. alt (Alternative Text): This attribute provides alternative text for the image if it cannot be displayed. This text is also used by screen readers to describe the image for visually impaired users, making your site more accessible.
<img src="img/tree.jpeg" alt="A Green Tree">
3. width: Specifies the width of the image in pixels. This attribute resizes the image to the specified width.
<img src="img/tree.jpeg" alt="A Green Tree" width="300">
4. height Specifies the height of the image in pixels.
<img src="img/tree.jpeg" alt="A Green Tree" width="300" height="400">
5. title: Provides additional information about the image when a user hovers over it with the mouse.
<img src="img/tree.jpeg" alt="A Green Tree" width="300" height="400" title ="A green tree under a clear blue sky">
6. loading: Specifies whether the image should be loaded immediately or deferred until it is needed (when it enters the viewport). Following are the possible values for loading attribute.
· eager: Loads the image as soon as possible. It is the default value.
· lazy: Defers loading the image until it’s near the viewport.
<img src="image.jpg" alt="A forest" loading="lazy">
7. crossorigin: Handles CORS (Cross-Origin Resource Sharing) requests for images loaded from different origins.
Following are the possible values for crossorigin attribute.
· anonymous: Sends no credentials with the request.
· use-credentials: Sends credentials (like cookies or HTTP authentication) with the request.
<img src="https://example.com/image.jpg" alt="External image" crossorigin="anonymous">
8. referrerpolicy: Controls the referrer information sent when loading an image. : Various options like "no-referrer", "no-referrer-when-downgrade", "origin", etc., are supported
tree.jpeg
hello-world.html
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>Images Embedding</title> </head> <body> <img src="img/tree.jpeg" alt="A Green Tree" width="300" height="400" title = "A green tree under a clear blue sky"> </body> </html>
Points to consider
1. Always provide an alt attribute to improve accessibility and SEO.
2. If you do not specify any height and width values to the img tag, the size is determined by the actual dimensions of the image file itself
No comments:
Post a Comment