width and height attributes:
Specify the width and height of the image in pixels.
<img src="image-url.png" alt="Alt Text of the image" width="400" height="300">
Image Tag
HTML Image tag, tag is used to embed images in a web page. It is an empty, self-closing tag, meaning it does not have a closing tag.
The src attribute is a required attribute, specifying the source URL (file path or URL) of the image
Image Syntax:
<img src="image-url.png" alt="Image Alt Text">
src attribute: Specifies the source URL of the image.
alt attribute: Provides alternative text for the image. This text is displayed if the image cannot be loaded or for accessibility purposes.
Example:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Image Example</title> </head> <body> <h1>Web Page with Image</h1> <!-- Embedding an image --> <img src="image-url.png" alt="Alt text of Image"> <!-- Other content goes here on the web page --> </body> </html>
Additional Attributes
Responsive Images:
Use the max-width: 100%; CSS style to ensure that images are responsive and do not exceed the width of their container.
<style>
img {
height: auto;
max-width: 100%;
}
</style>
Title Attributes
Adds a tooltip that appears when the user hovers over the image.
<img src="image-url.png" alt="Alt Text of the Image" title="Click to enlarge">