Learn Working with Images in HTML

Images improve the visual appeal of a webpage and help communicate information. In HTML, images are added using the <img> tag.

Inserting Images

The <img> tag is self-closing and requires at least two attributes:

src: the image file location;
alt: alternative text for accessibility or when the image fails to load.

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

Image Attributes

src: path or URL of the image (required);
alt: fallback text and accessibility description;
width: sets the image width;
height: sets the image height;
title: shows a tooltip on hover.

index.html

The <img> tag inserts an image onto a web page;
The src attribute specifies the source URL of the image file;
The alt attribute sets the alternative text for the image;
The width attribute sets the image width;
The height attribute sets the image height;
The title attribute provides further information about the image.

Everything was clear?

Thanks for your feedback!

Section 3. Chapter 1

Ask AI

Ask anything or try one of the suggested questions to begin our chat

Suggested prompts:

Can you explain more about the difference between using local and online images?

What happens if I don't include the alt attribute in my image tag?

How do I make sure my images are responsive on different devices?

Swipe to show menu

Images improve the visual appeal of a webpage and help communicate information. In HTML, images are added using the <img> tag.

Inserting Images

The <img> tag is self-closing and requires at least two attributes:

src: the image file location;
alt: alternative text for accessibility or when the image fails to load.

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

Image Attributes

src: path or URL of the image (required);
alt: fallback text and accessibility description;
width: sets the image width;
height: sets the image height;
title: shows a tooltip on hover.

index.html

The <img> tag inserts an image onto a web page;
The src attribute specifies the source URL of the image file;
The alt attribute sets the alternative text for the image;
The width attribute sets the image width;
The height attribute sets the image height;
The title attribute provides further information about the image.

Everything was clear?

Thanks for your feedback!

Section 3. Chapter 1

Working with Images in HTML

Inserting Images

Image Attributes

1. What tag is used to insert images into an HTML document?

2. Which attribute is required for the `<img>` tag to display the image?

3. What does the `alt` attribute provide for an image?

4. What happens if the image specified in the `src` attribute cannot be loaded?

Working with Images in HTML

Inserting Images

Image Attributes

1. What tag is used to insert images into an HTML document?

2. Which attribute is required for the `<img>` tag to display the image?

3. What does the `alt` attribute provide for an image?

4. What happens if the image specified in the `src` attribute cannot be loaded?

Working with Images in HTML

Inserting Images

Image Attributes

1. What tag is used to insert images into an HTML document?

2. Which attribute is required for the <img> tag to display the image?

3. What does the alt attribute provide for an image?

4. What happens if the image specified in the src attribute cannot be loaded?

Working with Images in HTML

Inserting Images

Image Attributes

1. What tag is used to insert images into an HTML document?

2. Which attribute is required for the <img> tag to display the image?

3. What does the alt attribute provide for an image?

4. What happens if the image specified in the src attribute cannot be loaded?

2. Which attribute is required for the `<img>` tag to display the image?

3. What does the `alt` attribute provide for an image?

4. What happens if the image specified in the `src` attribute cannot be loaded?

2. Which attribute is required for the `<img>` tag to display the image?

3. What does the `alt` attribute provide for an image?

4. What happens if the image specified in the `src` attribute cannot be loaded?