0
0
HTMLmarkup~5 mins

Image tag usage in HTML

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Images make websites more interesting and help explain ideas visually.

To show a photo of a product on an online store.
To add a logo at the top of a webpage.
To display icons that help users understand buttons.
To decorate a blog post with relevant pictures.
To provide visual instructions or diagrams.
Syntax
HTML
<img src="image-url" alt="description">

The src attribute tells the browser where to find the image.

The alt attribute describes the image for people who can't see it.

Examples
Shows an image of a cat with a description for screen readers.
HTML
<img src="cat.jpg" alt="A cute cat">
Loads an image from the internet and describes it as a company logo.
HTML
<img src="https://example.com/logo.png" alt="Company logo">
Adds size attributes to control the image dimensions.
HTML
<img src="icon.svg" alt="Search icon" width="50" height="50">
Sample Program

This example shows a simple webpage with an image and a caption. The image scales to fit the screen and has a description for accessibility.

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Image Tag Example</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 1rem;
      max-width: 600px;
      margin: auto;
    }
    img {
      max-width: 100%;
      height: auto;
      border-radius: 0.5rem;
      display: block;
      margin-bottom: 1rem;
    }
    figcaption {
      font-style: italic;
      color: #555;
      margin-bottom: 2rem;
    }
  </style>
</head>
<body>
  <main>
    <figure>
      <img src="https://via.placeholder.com/400x200.png?text=Sample+Image" alt="Sample placeholder image">
      <figcaption>This is a sample image with a description.</figcaption>
    </figure>
    <p>Images help make content clearer and more engaging.</p>
  </main>
</body>
</html>
OutputSuccess
Important Notes

Always include the alt attribute to help users with screen readers.

Use relative or absolute URLs in src depending on where your image is stored.

Control image size with CSS or width and height attributes for better layout.

Summary

The <img> tag adds pictures to your webpage.

Use src to set the image source and alt to describe it.

Images improve user experience by making content visual and accessible.