Images In Html

Images improve the appearance and illustrate many concepts of the web pages.

Inserting Images in HTML Documents

The web is not just about text, its multi-media and HTML's multimedia features allow you to include images, audio clips, video clips, and other multimedia element in the web pages.

The <img> tag is used to insert images in HTML documents. It is an empty element and contains attributes only. The syntax of tag can be given with:

The following example inserts three images on the web page:

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example of HTML Images</title>
</head>
<body>
    <div>
   	<img src="image1.png" alt="html1">
    	<img src="image2.png" alt="html2">
    	<img src="image3.png" alt="html3">
    </div>
</body>
</html>

Output

Note: Like <br> , the <img> element is also an empty element, and does not have a closing tag. In XHTML it closes itself ending with "/>".

The Src Attribute of Images

Every image has a src attribute (src stands for source). The src attribute tells the browser where to find the image you want to display. The URL of the image provided as the value of src attribute points to the location where the image is stored.

The Alt Attribute of Images

The alt attribute is the alternative description for an image, if the image cannot be displayed. The value of the alt attribute is an author-defined text.

Setting Width and Height of an Image

The width and height attributes are used to specify the height and width of an image.

The attribute values are specified in pixels by default.

Example

						
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example of Setting Dimensions for Images</title>
</head>
<body>
    <div>
    	<img src="image1.png" alt="html1" width="300" height="300">
    	<img src="image2.png" alt="html2" width="250" height="150">
    	<img src="image3.png" alt="html3" width="200" height="200">
    </div>
</body>
</html>

Output

Note: It's a good practice to specify both the width and height attributes for an image. In the absence of these attributes the image loads with its original size that may cause distortion or flicker in your website layout.

HTML Image Tags

Tag	Description
<img>	Defines an image.
<map>	Defines an image-map.
<area>	Defines a clickable area inside an image-map.

« Previous Next »