HTML Images – How to Use the HTML Element? | TechGeekBuzz

By | October 23, 2021
HTML Images

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.

Vamware

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" >

Output

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;">

Output
techgeekbuzz logo

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.

People are also reading:

Leave a Reply

Your email address will not be published. Required fields are marked *