HTML Images

Images are an integral part of web pages, adding visual appeal and context. HTML uses the <img> tag to embed images into a webpage.

1. Basic Syntax of the <img> Tag

The <img> tag is used to add images. It is a self-closing tag, meaning it does not require a closing tag. The basic syntax is:

        <img src="imageURL" alt="description" title="tooltip">
    

Here:

• src: Specifies the image's location (URL or file path).
• alt: Provides alternative text for the image if it cannot be displayed.
• title: Adds a tooltip that appears when the user hovers over the image.

2. Adding an Image

To add an image, use the src attribute to specify the image's location. Example:

        <img src="https://codebacha.blogspot.com/sample-image.jpg" alt="Sample Image" title="Sample Image">
    

Output:

3. Specifying Alternate Text (alt Attribute)

The alt attribute is essential for accessibility and SEO. It provides a description of the image if it fails to load. Example:

        <img src="invalid-url.jpg" alt="An image of a sunset" title="Beautiful Sunset">
    

Output: If the image fails to load, users will see: "An image of a sunset".

4. Adding a Tooltip (title Attribute)

The title attribute provides additional information about the image when the user hovers over it. Example:

        <img src="https://via.placeholder.com/300" alt="Placeholder Image" title="Hover to see the tooltip">
    

Output:

5. Practical Example

Here’s a complete example combining all attributes:

        <img src="https://codebacha.blogspot.com/logo.png" 
             alt="codeBacha Logo" 
             title="Welcome to codeBacha">
    

Output:

6. Tips for Using Images

• Always include the alt attribute for better accessibility.
• Optimize image size to improve page load speed.
• Use descriptive file names for better SEO.
• Ensure the src attribute points to the correct file path or URL.

Written By: Muhammad Shoaib Khan Marwat (MSKM) | https://codebacha.blogspot.com/