Images are used on web pages to make the page more interactive and appealing to the user.
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` which stands for source and it specifies the image name on the local system or URL on the internet.
Syntax
<img src= "image name">
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, then make sure that the image and HTML document are present in the same folder or directory.
Image alt attribute
The alt attribute stands for alternate text, and it is used to provide extra information about the image itself. However, the user can not see the alt information if the image load correctly, alt text-only be displayed if the browser could not load the image.
Example
<img src ="techgeekbuzz.png" alt ="It's the logo of techgeekbuzz">
Output
Import Image from another Folder
If the image is not present in the same folder where the image link HTML document is, then 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;">
Import 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 would work as a link.
Example
<a href="https://www.techgeekbuzz.com"> <img src ="techgeekbuzz.png" > </a>
Floating images
Floating images come 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>