HTML Images (<img> Tags)

The <img> tag is used to display images on a web page. It is an empty tag (no closing tag).

Basic Syntax

<img src="image.jpg" alt="Image description">

Human Body Example

• <img> tag → Eyes
• Eyes help us see images
• Attributes tell what to see and how

Attributes of <img> Tag

src (Source) attribute — Mandatory

Tells the browser which image to show

<img src="photo.jpg">

alt (Alternative Text) attribute — Very Important

Shows text if image does not load

 Helps screen readers and SEO

<img src="boy.jpg" alt="Student Photo">

width & height attribute

Set image size

<img src="logo.png" width="200" height="100">

title attribute

Shows text on hover

<img src="car.jpg" title="This is a car">

style attribute

Used for design

<img src="pic.jpg" style="border:2px solid black;">

id attribute

Unique identity

<img src="img.png" id="mainImage">

class attribute

Used for styling or grouping

<img src="img.png" class="profile-pic">

Example (All Attributes Together)

1<img 
2  src="student.jpg"
3  alt="Student Image"
4  width="150"
5  title="Profile Photo"
6  class="photo"
7  style="border-radius:10px;"
8>

Important Rules

1. <img> has no closing tag
2.  src and alt are very important
3.  Always use alt attribute