US Trends

how to add image in html

To add an image in HTML, you use the <img> tag with at least the src (image path) and alt (text description) attributes like this: <img src="image.jpg" alt="Description of image">.

Basic image syntax

The core pattern looks like this.

html

<img src="images/photo.jpg" alt="A descriptive text about the photo">

Key parts:

  • img: The HTML tag that displays an image.
  • src: Path or URL to the image file (JPG, PNG, GIF, SVG, etc.).
  • alt: Text shown if the image can’t load and read by screen readers for accessibility.

Example with local file

If your image is in the same folder as your HTML file:

html

<img src="cat.png" alt="A cute cat sitting on a chair">

If it’s inside an images subfolder:

html

<img src="images/cat.png" alt="A cute cat sitting on a chair">

If you’re using a full URL (image hosted online):

html

<img src="https://example.com/images/cat.png" alt="A cute cat sitting on a chair">

Useful attributes for images

You can control how the image appears using extra attributes.

html

<img
  src="banner.jpg"
  alt="Landscape banner"
  width="600"
  height="300"
  title="Hover tooltip text"
>
  • width / height: Control display size in pixels (or CSS units via CSS). Helps prevent layout shifts.
  • title: Shows a small tooltip when the user hovers over the image.
  • loading="lazy": Tells the browser to load the image only when it’s almost visible (performance optimization).

Example with lazy loading:

html

<img
  src="photo.jpg"
  alt="A scenic mountain view"
  loading="lazy"
>

Adding captions with <figure> and <figcaption>

If you want a visible caption under the image (very common in articles), wrap it in <figure> and <figcaption>.

html

<figure>
  <img
    src="dinosaur.jpg"
    alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"
    width="400"
    height="341"
  >
  <figcaption>A T-Rex on display in the museum.</figcaption>
</figure>

This gives semantic structure (useful for accessibility and SEO) and groups image + caption together.

Making images responsive (modern practice)

On today’s web, you usually don’t want fixed pixel sizes; you want images that scale nicely on different screen sizes.

A simple responsive pattern using CSS:

html

<img src="photo.jpg" alt="City skyline at sunset" class="responsive-img">



css

.responsive-img {
  max-width: 100%;
  height: auto;
  display: block;
}
  • max-width: 100%: Image never grows beyond the container width.
  • height: auto: Keeps the aspect ratio correct.

For more advanced responsive images, you can use the <picture> element and srcset, but the basic <img> plus CSS covers most beginner needs.

Linking an image (clickable image)

To make an image clickable (e.g., a logo linking to the homepage), wrap it in an <a> tag:

html

<a href="index.html">
  <img src="logo.png" alt="Site logo">
</a>

When users click the logo, they go to index.html.

Background image vs <img>

Sometimes you don’t want the image as content but as decoration (e.g., a background). Then you usually use CSS, not <img>:

html

<div class="hero-section">
  <h1>Welcome to my site</h1>
</div>



css

.hero-section {
  background-image: url('background.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
  • Use <img> when the image is content (important for the meaning of the page).
  • Use CSS background-image when the image is purely decorative.

Small step‑by‑step checklist

  1. Put your image file in the project (usually in an images/ folder).
  1. Note the correct path (e.g., images/pic.jpg).
  1. In your HTML, add an <img> tag with src and alt.
  1. Optionally add width, height, loading, or a CSS class for styling.
  1. Reload your page in the browser and fix any broken paths.

Simple HTML mini‑example (full page)

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>How to add image in HTML</title>
  <style>
    .responsive-img {
      max-width: 100%;
      height: auto;
      display: block;
      margin: 20px auto;
    }
  </style>
</head>
<body>
  <h1>My first HTML image</h1>

  <figure>
    <img
      src="images/sunset.jpg"
      alt="Orange sunset over the ocean"
      class="responsive-img"
    >
    <figcaption>Sunset over the ocean.</figcaption>
  </figure>
</body>
</html>

This demonstrates the basic technique in a complete, working page: HTML image tag, alt text, simple styling, and a caption.

Quick SEO notes (matching your “Quick Scoop” meta angle)

  • Always use meaningful alt text; it helps accessibility and can support SEO.
  • Use descriptive file names like mountain-sunset.jpg instead of img001.jpg.
  • Avoid huge image files; compress and size them correctly before using.

TL;DR: Use <img src="path/to/file.jpg" alt="clear description">, then add optional attributes or CSS for size, responsiveness, and captions, depending on your layout needs.