HTML Images

Lesson 2 of 16 Beginner Interactive

The <img> tag embeds an image in the page. It is a self-closing tag.

Required Attributes

src — path or URL to the image
alt — alternative text (describes the image for accessibility and SEO)

Optional Attributes

width and height — image dimensions
loading="lazy" — delays loading until needed (good for performance)

Tip: Always include the alt attribute. It helps screen readers and improves SEO.

Syntax

HTML

<img src="image.jpg" alt="Description">

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

<img src="image.jpg" alt="Description"
     loading="lazy">

Image Tag Usage

HTML

<!DOCTYPE html>
<html>
<body>
    <img src="photo.jpg" alt="A beautiful photo">

    <img src="banner.png" alt="Banner" width="600" height="200">

    <img src="landscape.jpg" alt="Landscape"
         style="max-width: 100%; height: auto;">

    <figure>
        <img src="chart.png" alt="Sales Chart">
        <figcaption>Figure 1: Monthly Sales</figcaption>
    </figure>
</body>
</html>

Try It Yourself

Practice

Exercise

Add an image with a descriptive alt attribute.

Answer

<img src="photo.jpg" alt="A student studying at a desk with a laptop">

Quick Quiz

Which attribute is required for an <img> tag?

width

height

alt

src

The src attribute specifies the image source and is required. Alt is also strongly recommended for accessibility.

Interview Questions

The alt attribute provides a text description of the image. It is essential for accessibility (screen readers for blind users), SEO (search engines understand image content), and displays when the image fails to load.

HTML Links

Tutorial Complete

Back to HTML