HTML Image

HTML img tag is used to display image on the web page. HTML img tag is an empty tag that contains attributes only, closing tags are not used in HTML image element.

Example

    <!DOCTYPE html>  
    <html>  
    <head>  
        <title>HTML Tutorials</title>   
    </head>  
    <body>  
        <h2>HTML Image Example</h2>  
   <img src="desert.jpg" alt="Desert" height="200" width="200"/>
    </body>  
    </html>   


Output

 

Attributes of HTML img tag

 1) src

It is a necessary attribute that describes the source or path of the image. It instructs the browser where to look for the image on the server.

The location of image may be on the same directory or another server.

2) alt

The alt attribute defines an alternate text for the image, if it can't be displayed. The value of the alt attribute describe the image in words. The alt attribute is considered good for SEO prospective.

3) width

It is an optional attribute which is used to specify the width to display the image. It is not recommended now. You should apply CSS in place of width attribute.

4) height

It specify the height of the image. The HTML height attribute also supports iframe, image and object elements. It is not recommended now. You should apply CSS in place of height attribute.

 

Note: Always try to insert the image with height and width, else it may flicker while displaying on webpage.

 

Use of alt attribute
  
We can use alt attribute with tag. It will display an alternative text in case if image cannot be displayed on browser. Following is the example for alt attribute:

 

     <!DOCTYPE html>  
    <html>  
    <head>  
        <title>HTML Tutorials</title>   
    </head>  
    <body>  
        <h2>HTML Image Example</h2>  
    <img src="computer.png" alt="My Computer" height="200" width="200"/>  
    </body>  
    </html> 

 Output

 

No comments:

Post a Comment