HTML images are elements used to embed pictures and other visual media into web pages. They are created using the <img> tag in HTML. Unlike most other tags, the <img> tag is self-closing and does not have a closing tag.
Basic Syntax
Here is a basic example of an HTML image:
<img src="image.jpg" alt="Description of image">
In this example:
The <img> tag defines the image.
The src attribute specifies the path to the image file.
The alt attribute provides alternative text for the image, which is important for accessibility and is displayed if the image cannot be loaded.
Attributes of the <img> Tag
src: Specifies the URL or path to the image file.
alt: Provides alternative text for the image, which is used by screen readers and displayed if the image fails to load.
width: Specifies the width of the image (in pixels or as a percentage).
height: Specifies the height of the image (in pixels or as a percentage).
title: Provides additional information about the image, often shown as a tooltip when the mouse hovers over the image.
Example with More Attributes
<img src="https://www.example.com/image.jpg" alt="A beautiful scenery" width="600" height="400" title="Scenery">
Using Relative and Absolute URLs
Absolute URLs: Full web addresses (e.g., https://www.example.com/images/pic.jpg).
Relative URLs: Links relative to the current page (e.g., images/pic.jpg, ../images/pic.jpg).
Responsive Images
To make images responsive, you can use CSS or HTML attributes. A common method is to set the width to 100% and the height to auto:
<img src="image.jpg" alt="Responsive image" style="width:100%; height:auto;">