HTML Images
In HTML, images are added to web pages using the <img> tag. The <img> tag is an empty tag, meaning
it does not need a closing tag. Every image must have at least two important attributes: src and alt.
1. The src Attribute (Source of Image)
The src attribute tells the browser where to find the image file. The value of src can be either a relative
path (image stored inside the project folder) or an absolute URL (image taken from the internet).
• Example of a relative path (local image):
<img src="images/flower.jpg" alt="Red Flower">
• Example of an absolute path (online image):
<img src="https://www.example.com/pic.jpg" alt="Online Picture">
2. The alt Attribute (Alternative Text)
The alt attribute provides alternative text when the image cannot be displayed. This is useful if the
image is missing, if the internet is slow, or for visually impaired users who use screen readers. Search
engines also use alt text to understand the content of images.
Example:
<img src="dog.jpg" alt="A cute brown dog sitting in the park">
If the image dog.jpg cannot load, the text “A cute brown dog sitting in the park” will appear instead.
3. The width and height Attributes
The width and height attributes define the size of the image. They can be set in pixels (px) or
percentage (%) of the page.
Example:
<img src="cat.png" alt="White Cat" width="200" height="150">
This will display the image with a width of 200 pixels and a height of 150 pixels.
4. The title Attribute
The title attribute is used to show a tooltip when the user hovers the mouse over the image.
Example:
<img src="car.jpg" alt="Car" title="My Favorite Car">
When the user places the cursor over the car image, the text “My Favorite Car” will appear.
5. Image Paths in HTML
There are two ways to specify the path of an image:
• Relative Path: Points to the location of the image inside the project folder.
• <img src="images/pic.jpg" alt="Picture">
• Absolute Path (URL): Points to an image on the internet.
• <img src="https://example.com/pic.jpg" alt="Online Picture">
6. Making an Image a Link
An image can also work as a clickable link by placing it inside an <a> tag.
Example:
<a href="https://www.example.com">
<img src="logo.png" alt="Website Logo" width="120">
</a>
When the user clicks on the logo, it will take them to the example website.
7. Image Mapping (Clickable Areas on an Image)
Sometimes, a single image can have multiple clickable areas, like different countries on a world map.
This is done using the <map> and <area> tags.
Example:
<img src="world-map.jpg" usemap="#worldmap" width="500" height="250">
<map name="worldmap">
<area shape="rect" coords="34,44,270,350" href="asia.html" alt="Asia">
<area shape="circle" coords="337,300,44" href="europe.html" alt="Europe">
</map>
• shape defines the area (rectangle, circle, polygon).
• coords defines the coordinates of that area.
• href is the link for that part of the image.
