HTML Images - How to Use the HTML <img> Element?

    Images are used on web pages to make the page more interactive and appealing to the user. In this article, we are going to discuss HTML images, i.e., how to add images to a webpage using HTML.

    HTML Images

    The HTML <img> Element

    To define an image on the web page, we use the HTML <img> element. <img> is an empty tag, so it does not have any paired-end tag. <img> has a mandatory attribute src that stands for source, and it specifies the image name on the local system or URL on the internet.

    Syntax 

    <img src= "image_name">

    Example

    Image present on the local system 

    <img src = "google.png">

    Image URL 

    <img src = "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">

    Output:

    Note: If you are directly using the image name, make sure that the image and the HTML document are present in the same folder or directory.

    The alt Attribute

    The alt attribute stands for alternate text, and it is used to provide extra information about the image. However, the user can not see the alt information if the image loads correctly, and alt text is only displayed if the web browser could not load the image.

    Example 

    <img src ="techgeekbuzz.png" alt ="It's the logo of techgeekbuzz" >

    Note: The alt attribute is optional; however, from an SEO perspective, it is always suggested to add it.

    Image Width and Height

    The width and height of an image can be set using the style attribute. It is always a good practice to define the width and height of HTML images and specify the proper image area.

    Example 

    <img src="techgeekbuzz.png" alt="techgeekbuzz logo" style="width:200px;height:200px;">

    Importing Image from Another Folder

    If the image is not present in the same folder where the HTML document is, we need to specify the location of the image along with the image name.

    Example 

    <img src="C:\Users\name\Pictures\koala.jpg" alt ="koala picture" style ="width:120px; height: 120px;">

    Importing HTML Images from The Server

    In the src attribute, we can also pass the server link of the image to display the image on our web page.

    Example 

    <img src=""https://www.google.com /images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt ="google logo">

    Images Links

    If we put the <img> elements inside the <a> element, then the image will work as a link.

    Example 

    <a href="https://www.techgeekbuzz.com"> 
    <img src ="techgeekbuzz.png" >
</a>

    Floating Images

    Floating images are useful when we want to display an image to the left or right side of a text.

    Example 

    <p>
<img src="image.jpg"  
style="float:right;
width:30px;height:30px;">
Image will be displayed on the right side of this text</p>

    Summary

    • To display an image on the web page, we use the <img> element.
    • It is mandatory to pass the src attribute in the <img> tag.
    • <img> is an empty tag.
    • The alt attribute is optional (but highly recommended), and it provides textual information about the image.
    • Always mention the image width and height by using the style element or attribute.
    Previous Tutorial Next Tutorial