HTML Course - Lesson 5: Images

The <img> Tag

The <img> tag is used to embed images in a webpage. It is a self-closing tag that requires the src (source) attribute and should include the alt (alternative text) attribute for accessibility.

<img src="images/photo.jpg" alt="A beautiful sunset">

Image Attributes

src — the path or URL to the image.
alt — a description of the image for screen readers and in case the image can’t load.
title — optional text shown when hovering over the image.
width & height — set image dimensions (better done in CSS).

<img src="logo.png" alt="Company Logo" title="Our Logo" width="200" height="100">

Absolute vs Relative Paths

You can link to an image using a full URL (absolute) or a path relative to your current file (relative).

<!-- Absolute path -->
<img src="https://example.com/images/photo.jpg" alt="Example">

<!-- Relative path -->
<img src="images/photo.jpg" alt="Example">

Image Formats

JPEG — good for photos, smaller file sizes.
PNG — supports transparency, good for logos.
GIF — supports animations.
SVG — scalable vector graphics, great for icons and diagrams.

Exercise

Create a webpage with:

An image of yourself or a favorite place (use alt text).
A logo or icon from your school site.
One image from the internet using an absolute URL.
Make sure at least one image uses the title attribute.