Learn Adding Images in HTML | Working with Media and Tables

Images make web pages more engaging. You can insert an image using the <img> tag.

index.html

Key attributes:

src: required. Path to the image file (absolute or relative);
alt: required. Text shown if the image can't load, also used by screen readers;
width / height: size in pixels. Without them, the image displays at its original size.

alt Attribute

The alt text should describe the image clearly and give useful context.

Let's imagine the following example. You have a source about horse racing. You want to show how competitors get ready for the racing.

Poor alt text:

index.html

Better alt text:

index.html

The improved version provides real context and helps visually impaired users understand what the image shows.

src Attribute

The src attribute can use both absolute and relative paths to specify the location of the image file.

Absolute Path

A full URL pointing to an online image.

index.html

Anyone can access the image through this full link.

Please, inspect the following real example in the code sandbox below.

Note

To examine the file folder structure, drag the slider on the code sandbox interface's left side. In the top left corner, you will find a burger button represented by three stripes. Clicking on this button will navigate you to the file folder organization.

Relative Path

Points to an image inside your project folder.

index.html

This means image.jpg is stored in the images directory near your HTML file.

Please inspect the real example provided in the code sandbox below. You will find the images folder, which contains the sun.png file.

Summary

Absolute paths: full URLs that work from anywhere on the internet.

Relative paths: local project paths used inside your own folder structure.

1. Which tag can be used to put an image on a website?

2. What attribute is required to specify for an `<img/>` tag?

Everything was clear?

Thanks for your feedback!

Section 4. Chapter 1

Ask AI

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

Suggested prompts:

Can you explain the difference between absolute and relative paths in more detail?

What are some tips for writing effective alt text for images?

Can you show more examples of using the img tag with different attributes?

Swipe to show menu

Images make web pages more engaging. You can insert an image using the <img> tag.

index.html

Key attributes:

src: required. Path to the image file (absolute or relative);
alt: required. Text shown if the image can't load, also used by screen readers;
width / height: size in pixels. Without them, the image displays at its original size.

alt Attribute

The alt text should describe the image clearly and give useful context.

Let's imagine the following example. You have a source about horse racing. You want to show how competitors get ready for the racing.

Poor alt text:

index.html

Better alt text:

index.html

The improved version provides real context and helps visually impaired users understand what the image shows.

src Attribute

The src attribute can use both absolute and relative paths to specify the location of the image file.

Absolute Path

A full URL pointing to an online image.

index.html

Anyone can access the image through this full link.

Please, inspect the following real example in the code sandbox below.

Note

Relative Path

Points to an image inside your project folder.

index.html

This means image.jpg is stored in the images directory near your HTML file.

Please inspect the real example provided in the code sandbox below. You will find the images folder, which contains the sun.png file.

Summary

Absolute paths: full URLs that work from anywhere on the internet.

Relative paths: local project paths used inside your own folder structure.

1. Which tag can be used to put an image on a website?

2. What attribute is required to specify for an `<img/>` tag?

Everything was clear?

Thanks for your feedback!

Section 4. Chapter 1

Adding Images in HTML

Key attributes:

alt Attribute

src Attribute

Absolute Path

Relative Path

1. Which tag can be used to put an image on a website?

2. What attribute is required to specify for an <img/> tag?

Adding Images in HTML

Key attributes:

alt Attribute

src Attribute

Absolute Path

Relative Path

1. Which tag can be used to put an image on a website?

2. What attribute is required to specify for an <img/> tag?

2. What attribute is required to specify for an `<img/>` tag?

2. What attribute is required to specify for an `<img/>` tag?