Home Tutorials Videos Q&A MCQ Exercises Appointment Login
Lesson 8 of 21 – HTML Images
40%
40%

HTML Images

In HTML, images are added to a webpage using the <img> tag. Images make a webpage more attractive, useful, and easier to understand.

Important: The <img> tag is an empty tag. It does not have a closing tag.

What Are HTML Images?

HTML images are used to display pictures on a webpage. The browser reads the image path and shows the image on the screen. Images are not directly stored inside the page; they are linked through their source path.

Basic Image Syntax 
<img src="image.jpg" alt="My Image">

HTML Img Attributes

The <img> tag uses attributes to define the image file and display details.

Attribute Purpose
src Path or URL of the image file
alt Alternative text if image cannot be displayed
width Sets the width of the image
height Sets the height of the image

Required Attributes of Image Tag

  • src: Specifies the path to the image file.
  • alt: Provides alternate text if the image is not displayed.

The src Attribute

The src attribute tells the browser where the image file is located. The path may be a local file path or an internet URL.

Example 
<img src="myimage.jpg" alt="My Image">

The alt Attribute

The alt attribute provides alternate text for an image. It is useful when the image cannot load and also helps screen readers.

Example 
<img src="india.jpg" alt="Image of India">

Image Size – Width and Height

You can control the size of an image using the width and height attributes or with CSS style.

Width and Height Example 
<img src="img1.jpg" alt="Image 1" style="width:500px;height:600px;">

Responsive Image Example

<img src="image.jpg" alt="Responsive Image" style="max-width:100%;height:auto;">

Key Points

  • The <img> tag is used to display images on a webpage.
  • The src attribute is mandatory.
  • The alt attribute improves accessibility and SEO.
  • Width and height can be set using HTML or CSS.
  • Responsive images help pages look good on mobile and desktop screens.
💡 Remember
Images are an important part of webpages. Always use the alt attribute for accessibility and better SEO.

🧠 Quiz

Which attribute specifies the image location?

← Previous Next →