CLASS X image tag and its attributes Notes

The <img> tag in HTML is used to embed images into a webpage. It is a self-closing tag, meaning it does not have a closing tag. The primary attributes used with the <img> tag are:

1. `src` (Source)

Description: Specifies the path to the image file.
Example: src="image.jpg"

2. `alt` (Alternative Text)

Description: Provides alternative text for the image if it cannot be displayed. It’s also used by screen readers for accessibility purposes.
Example: alt="A description of the image"

3. `width`

Description: Specifies the width of the image in pixels or percentage.
Example: width="300"

4. `height`

Description: Specifies the height of the image in pixels or percentage.
Example: height="200"

5. `title`

Description: Provides additional information about the image. This text appears as a tooltip when the mouse hovers over the image.
Example: title="Tooltip text"

6. `loading`

Description: Defines whether the image should be loaded immediately or deferred until it's needed (lazy loading).
Example: loading="lazy"

7. `class`

Description: Specifies one or more class names for the image, allowing you to apply CSS styles.
Example: class="image-class"

8. `id`

Description: Specifies a unique ID for the image, allowing you to apply CSS styles or reference it in JavaScript.
Example: id="unique-image-id"

Example of an Image Tag


Here’s a complete HTML example that includes the <img> tag:

<!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>My Image</h1>
    <p>This is an example of an image embedded in an HTML document.</p>

    <img src="path_to_image.jpg" alt="A description of the image" width="300" height="200" title="Tooltip text" loading="lazy">

</body>
</html>
Breakdown:
<!DOCTYPE html>: Declares the document type and version of HTML.
<html lang="en">: The root element of the HTML document. The lang attribute specifies the language of the document.
<head>: Contains metadata and links to stylesheets, scripts, etc.<meta charset="UTF-8">: Sets the character encoding.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: Ensures proper rendering and touch zooming on mobile devices.
<title>: Specifies the title of the web page, which appears in the browser tab.
<body>: Contains the content of the HTML document.<h1>: Defines a top-level heading.
<p>: Defines a paragraph.
<img>: Embeds the image with attributes like src, alt, width, height, title, and loading.
Replace "path_to_image.jpg" with the actual image file path or URL.