Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Images | Images and Media
HTML Essentials
course content

Course Content

HTML Essentials

HTML Essentials

1. Understanding the Web and HTML
2. HTML Fundamentals
3. Images and Media
4. Tables and Forms
5. Advanced HTML

bookImages

Images

Images play a crucial role in enhancing the visual appeal and conveying information on web pages. In HTML, images are inserted using the <img> tag.

Inserting Images

The <img> tag is used to insert images into an HTML document. Unlike most HTML tags, the <img> tag does not have a closing tag and is self-closing.
Example:

In the example above:

  • The <img> tag is used to insert an image;
  • The src attribute specifies the source (URL) of the image file;
  • The alt attribute provides alternative text for the image. This text is displayed if the image cannot be loaded or for accessibility purposes.

Before exploring a real-world example, let's understand the essential attributes of the img tag and how they impact its content.

Image Attributes

  1. src: Specifies the source (URL) of the image file. This attribute is required for the <img> tag to display the image;
  2. alt: Provides alternative text for the image. The text specified in the alt attribute is displayed if the image cannot be loaded or for accessibility purposes. It is essential for users who may be using screen readers or for situations where the image cannot be displayed;
  3. width: Specifies the width of the image in pixels or as a percentage of the parent container;
  4. height: Specifies the height of the image in pixels or as a percentage of the parent container;
  5. title: Provides additional information about the image. It is often displayed as a tooltip when the user hovers over the image.
    Example:
html

index

css

index

js

index

copy

In the example above:

  • 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.

Video Tutorial

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?
What tag is used to insert images into an HTML document?

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

Select the correct answer

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

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

Select the correct answer

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

What does the alt attribute provide for an image?

Select the correct answer

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

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

Select the correct answer

Everything was clear?

How can we improve it?

Thanks for your feedback!

Section 3. Chapter 1
some-alt