HTML5 Images

What is an Image in HTML5?

In HTML5, you use the <img> tag to embed images (like PNG, JPG, GIF, SVG) into a web page.

It’s an empty tag, meaning it doesn’t have a closing tag — all information goes inside the opening tag.

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

Attributes

Attribute	Description
src	URL or path to the image file.
alt	Text description for screen readers & in case the image fails to load.
width	Width of the image (pixels or %).
height	Height of the image (pixels or %).
title	Tooltip text shown on hover.

Absolute vs Relative Paths

Absolute path:

Full URL to an external image.

<img src="https://example.com/images/pic.jpg" alt="External image">

Example:

Relative path:

Path relative to your HTML file’s location.

<img src="images/pic.jpg" alt="Local image">

Example:

Responsive Images

Use CSS or attributes like width="100%" so images adapt to screen sizes.

<img src="banner.jpg" alt="Responsive Banner" width="100%">

Why use alt?

Helps screen readers describe images to visually impaired users.
Shown when the image doesn’t load.
Improves SEO (search engines read alt text).

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HTML5 Image Example</title>
</head>
<body>
  <h1>Our Product</h1>
  <img src="product.jpg" alt="New summer shoes" width="300">
</body>
</html>