<img> Tag in HTML – Full Details with suitable example

  • This is used to create image control on webpage.
  • The src property of image tag is to a sign. image on image control.
  • The <img> tag is used to embed images in a webpage.
  • It is an empty (self-closing) tag, meaning it does not require a closing tag like <img> ... </img>.

✅ Syntax

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

  • src → Path or URL of the image file (src=source).

  • alt → Alternative text (important for SEO and accessibility).

  • width / height → Sets image dimensions (in pixels or %).

⚙️ Attributes of <img>

Here are the important attributes:

  1. src (source)

    • Defines the path or URL of the image.

    • Example:

      <img src="photo.jpg" alt="My Photo">

  2. alt (alternative text)

    • Provides text if the image is not loaded.

    • Used by screen readers for visually impaired users.

    • Example:

      <img src="logo.png" alt="Company Logo">

  3. width and height

    • Defines the size of the image.

    • Units: pixels (px) or percentage (%).

    • Example:

      <img src="banner.jpg" width="600" height="300">

  4. title

    • Displays tooltip text when hovering over the image.

    • Example:

      <img src="nature.jpg" alt="Nature" title="Beautiful Nature">

  5. loading (HTML5)

    • Controls how images load.

    • Values: lazy (loads when in view), eager (loads immediately).

    • Example:

      <img src="large-image.jpg" alt="Big Image" loading="lazy">

  6. align (Deprecated)

    • Used in older HTML to align images (left, right, middle).

    • Example:

      <img src="pic.jpg" align="right">

  7. border (Deprecated)

    • Adds a border around the image.

    • Example:

      <img src="photo.jpg" border="2">

🎯 Examples

Example 1: Basic Image

<img src="flower.jpg" alt="A red flower">

Example 2: Image with Fixed Size

<img src="car.jpg" alt="Sports Car" width="400" height="250">

Example 3: Image with Tooltip

<img src="bird.png" alt="Flying Bird" title="This is a bird">

Example 4: Lazy Loading Image

<img src="big-photo.jpg" alt="Large Photo" loading="lazy">

Example 5: Image as a Link

<a href="https://www.example.com">
<img src="logo.png" alt="Website Logo" width="150">
</a>

Example 6: Background + Transparent Image

<body style="background-color: lightblue;">
  <img src="transparent.png" alt="Transparent Image" width="200">
</body>


Image Tag in HTML – Full Details with suitable example

<html>
<body>
<img src=“image.jpg” alt=“Description” width=“300” height=“200”>
</body>
</html>

https://csaccept.com/marquee-tag-in-html-full-details-with-suitable-example/