How to Insert an Image in HTML Page?

To insert an image in HTML page, is a very common and easy task that enhances the appearence of any web page. It makes a web age look more attractive.

In this article, our task is to insert an image in HTML page. We have used three different approaches using HTML tags and CSS properties to insert an image in HTML page.

Approaches to Insert an Image in HTML Page

Here is a list of approaches to insert an image in HTML page which we will be discussing in this article with stepwise explaination and complete example codes.

• Insert an Image using img Tag
• Insert an Image using background Property
• Insert an Image using embed Tag

Insert an Image using img Tag

To insert an image, we have used HTML img tag. HTML img tag is an inline and empty element used to embed image in the HTML document.

• We have used img tag to insert image using link of the image. The alt attribute describes about the image when image fails to load.
• Then, we have used img element selector to set the top margin and width of the image using CSS margin-top and width property.

Example

Here is a complete example code implementing above mentioned steps to insert an image in HTML page using HTML img tag.

    
    


    

        To Insert an Image in HTML Page
    
    

        In this example we have used Html img 
         tag to insert an image in HTML page.
    
    

Insert an Image using background Property

In this approach to insert an image in HTML page, we have used CSS background property with url() function.

• We have used a div container with img class. We will be setting background image of this div container.
• We have used img class to set the background of div using url() function.
• Then, we have used background-repeat property to stop repeating of image and set the dimension of image using CSS height and width property.

Example

Here is a complete example code implementing above mentioned steps to insert an image in HTML page using CSS background property and url() function.

    
    


    

        To Insert an Image in HTML Page
    
    

        In this example we have used CSS background 
         property with url() 
        function to insert an image in HTML page.
    
    

Insert an Image using embed Tag

In this approach, we have used HTML embed tag to insert an image in HTML page which is used as a container for external applications, multimedia, and interactive content that the browser don't understand.

• We have used embed tag to insert image and used type attribute to specify the type of media.
• Then, we have used embed as element selector to set the width and top margin of the image.

Example

Here is a complete example code implementing above mentioned steps to insert an image in HTML page using HTML embed tag.

    
    


    

        To Insert an Image in HTML Page
    
    

        In this example we have used Html embed 
         tag to insert an image in HTML page.
    
     

Conclusion

In this article, to insert an image in HTML page we have understood three different approaches which are: by using HTML img tag, CSS background property and HTML embed tag. Out of all three approaches we have discussed, HTML img tag is most frequently used to insert an image.