HTML: Image Tag

The image tag (<img>) in HTML is used to embed images into web pages. Images enhance the visual appeal of a webpage and are commonly used for logos, illustrations, photographs, buttons, and more. Here are the key points about the <img> tag:

Usage:

• The <img> tag is a self-closing tag used to display images on a web page.
• Example:

<img src="https://www.example.com/image.jpg" alt="Example Image">

Src Attribute:

• The src attribute in the <img> tag specifies the URL (Uniform Resource Locator) or file path of the image to be displayed.
• It can be an absolute URL (starting with http:// or https://) or a relative URL (relative to the current document).
• Example with absolute URL:

<img src="https://www.example.com/image.jpg" alt="Example Image">

• Example with relative URL:

<img src="images/logo.png" alt="Logo">

Alt Attribute:

• The alt attribute in the <img> tag provides alternative text for the image, which is displayed if the image fails to load or for accessibility purposes.
• The alt text should be descriptive and convey the content or purpose of the image.
• Example:

<img src="image.jpg" alt="A scenic view of mountains">

Width and Height Attributes:

• You can specify the width and height of the image using the width and height attributes in the <img> tag. These attributes are optional but recommended for controlling the image dimensions.
• Example:

<img src="image.jpg" alt="Image" width="300" height="200">

Responsive Images:

• To create responsive images that scale proportionally based on the device's screen size, you can use CSS or the width attribute with a percentage value.
• Example using CSS for responsive images:

Accessibility Considerations:

• Ensure that all <img> tags have descriptive and meaningful alt text to improve accessibility for users who rely on screen readers or have images disabled.
• Use appropriate contrast and colors in images for better visibility.

Styling with CSS:

• You can apply CSS styles to <img> tags to control their appearance, such as border, margin, padding, alignment, hover effects, etc.
• Example CSS:

<style>
   .responsive-img {
       max-width: 100%;
       height: auto;
   }
</style>
<img src="image.jpg" alt="Responsive Image" class="responsive-img">

The <img> tag is essential for including images in HTML documents, providing visual content that enhances the user experience and communicates information effectively.